使用Bootstrap Modal的fullcalendar打开事件 - javascript

我使用以下示例以引导程序模式打开全历事件：（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...

            ?>

javascript大神给出的解决方案

您有几种选择（尽管我有些困惑，因为您已经可以在模态窗口中使用$('#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，然后将iFrame源设置为元素事件。

执行onclick时获得意外令牌 - javascript

我正在使用onclick事件从PHP调用JS函数。这是我的代码：我在一个函数中，因此我需要通过PHP来完成它，因为然后我会返回：$html = '<input type="checkbox" checked value="1" id="setGetSku" name="se…

如何防止SQL使用单引号字符存储转义字符 - javascript

我需要存储在开头和结尾都带有单引号的文本字符串。我正在从PHP发布JavaScript命令。我将引号添加到这样的字符串中：echo '<script type="text/javascript">'; echo 'function GetCodes() {'; echo 'va…

Mongo汇总 - javascript

我的收藏中有以下文件{ "_id": ObjectId("54490b8104f7142f22ecc97f"), "title": "Sample1", "slug": "samplenews", "cat": …

Ajax功能后没有数据传递到URL - javascript

这是我使用Ajax将参数传递到另一个PHP页面的脚本。 $(document).on( "click",".btndriver", function() { var id = $(this).attr("id"); var nombre = $(this).attr("nombre…

通过相同的ID名称分配和获取值 - javascript

我正在使用x-editable http://vitalets.github.io/x-editable/index.html jQuery Inplace编辑器。目前，我有一个如下的工作代码：<?php $num_rows = 1; // store the record of the "tblstudent" table int…