javascript — полное событие открытия календаря с использованием Bootstrap Modal
Я открываю события fullcalendar с помощью модема начальной загрузки, используя этот пример: (http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/)
Работает отлично.
Теперь, когда событие открыто, я не знаю, как поступить, чтобы получить информацию об этом событии. Позвольте мне объяснить, событие связано в моей базе данных (MySQL) с некоторой другой информацией и другими таблицами. В этом модальном всплывающем окне я хотел бы показать связанную информацию.
Я думал, что это будет работать: (на моей главной странице у меня есть это)
element.click(function() {
//set the modal values and open
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
var my_variable = event.id; // here i take the event id
$.ajax({
url: 'ajax.php',
data: { var_PHP_data : my_variable },
type: "GET"// here i send my id to my ajax page
});
Тогда на моей странице ajax.php я бы просто сделал:
$event_id = $_GET['var_PHP_data'];
И на моей главной странице, где отображается модальное всплывающее окно, я бы просто сделал:
<?php
include("ajax.php");
echo $event_id;
?>
Но это не работает, потому что он находится на одной странице, а ajax для удаленных страниц.
Так есть ли способ получить в этом всплывающем окне модальный идентификатор события?
например, я хотел бы сделать что-то подобное в моем модальном
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body">
<?php
$event_id = $_GET['event_id'];
//the use this event for mysql operations...
?>
Решение
У вас есть несколько вариантов (хотя я немного запутался, потому что вы уже можете установить идентификатор события в модальном окне с чем-то вроде $('#modalBody').html(event.id);)
1) Я думаю, что наиболее эффективным было бы просто отправить обратно все необходимые данные о событиях в вашем источнике событий. Вы уже передаете дополнительные данные, такие как description, Вы можете добавить любые дополнительные поля, которые вы хотите, чтобы ваш источник, а затем просто передать его непосредственно в модальное с event.SomeDataField, Настройте это модальное всплывающее окно по своему усмотрению и добавьте все дополнительные поля, которые вы хотите. Это было бы идеальным способом, потому что нет необходимости в AJAX для дополнительных вызовов базы данных.
2) Если данных слишком много для передачи, и ваш источник событий был бы слишком большим, если бы он был включен, или вы не можете эффективно встроить эти дополнительные данные в свой источник из-за схемы базы данных, тогда AJAX может работать для извлечения дополнительных данные. Просто переместите весь модальный код внутри вызова AJAX, чтобы установить значения модального режима для данных, полученных из вызова AJAX. Что-то вроде:
element.click(function() {
$.ajax({
url: 'ajax.php',
data: { var_PHP_data : event.id },
type: "GET"}).done(function(data) {
$('#modalTitle').html(event.title);
$('#modalBody').html(data.extraDetails); //or whatever fields you are returning
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
});
3) Если ваш модальный макет окна становится слишком сложным для управления, подумайте о шаблонировании макета и верните необходимый HTML либо из вызова AJAX, либо просто сделайте контент модального объекта iFrame и установите источник iFrame для элемента click событие.
Другие решения
Других решений пока нет …