Question

我使用此示例打开带有bootstrap模式的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适用于远程页面。

那么有没有办法在弹出模式中检索事件ID？

例如我想在我的模态

中做这样的事情

<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...

            ?>

Answer 1

你有几个选择（虽然我有点困惑，因为你已经可以在模态窗口中设置事件id，如$('#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）如果您的模态窗口布局太复杂而无法轻松管理，请考虑模板布局并从AJAX调用返回所需的HTML，或者只是将模态的内容设为iFrame并设置iFrame源元素click事件。

使用Bootstrap Modal的fullcalendar打开事件

1 个答案: