使用Bootstrap Modal的完整日历开放活动


fullcalendar open event using Bootstrap Modal

我使用引导模式打开完整日历事件,使用以下示例:(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...
            ?>

您有几个选项(尽管我有点困惑,因为您已经可以在模式窗口中使用类似$('#modalBody').html(event.id);的东西设置事件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,并在元素click事件上设置iFrame源。