[英]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 $('#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, click
在元素上设置iFrame源。事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.