jQuery FullCalendar如何在ajax调用后显示数据而不刷新页面答案

【问题标题】：jQuery FullCalendar how to show data after ajax call without refreshing pagejQuery FullCalendar如何在ajax调用后显示数据而不刷新页面
【发布时间】：2014-12-19 10:05:37
【问题描述】：

我正在尝试将 jQuery FullCalendar 与 PHP 和 MySQL 集成。对我来说，问题是当我通过使用 AJAX 选择日期插入新事件时，我不知道如何显示这个新添加的事件没有刷新页面..所以基本上这是 FullCalendar 调用：

var calendar = $('#calendar').fullCalendar({

    editable: true,
    firstDay: 1,

    header: {
        left: 'month, agendaWeek, agendaDay',
        center: 'title',
        right: 'prev, next, today'
    },

    // receive events from DB
    events: {
        url: 'events.php',
        type: 'POST',
        cache: false,
        error: function() {
            alert('ERROR');
        }
    },

    buttonIcons: {
        prev: 'left-single-arrow',
        next: 'right-single-arrow'
    },

    // Convert the allDay from string to boolean
    eventRender: function(event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }

        element.find('.fc-event-title').append("<br/>" + event.description);
    },

    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {

        var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
        var end   = moment(end).format("YYYY-MM-DD HH:mm:ss");
        var user_id = <?php echo $_SESSION['user_id']; ?>

        // to unix
        start = moment(start).unix();
        end = moment(end).unix();

        $('#myModal').modal({
            remote: 'modals/add_event.php?start='+start+'&end='+end+'&id='+user_id
        });

    }           

});

我做事件插入的地方是：

select: function(start, end, allDay) {

    var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
    var end   = moment(end).format("YYYY-MM-DD HH:mm:ss");
    var user_id = <?php echo $_SESSION['user_id']; ?>

    // to unix
    start = moment(start).unix();
    end = moment(end).unix();

    $('#myModal').modal({
        remote: 'modals/add_event.php?start='+start+'&end='+end+'&id='+user_id
    });

}

它正在打开模式对话框，我在其中提交日历数据，然后通过 AJAX 向 DB 提交数据。在此之后，我无法弄清楚如何在不刷新页面的情况下显示新添加的数据。这里有什么帮助吗？

另外：这是我在提交模态对话框表单时的 AJAX 调用：

$.ajax({
    type : "POST",
    url : "ajax/add_event.php?start="+start.unix()+'&end='+end.unix()+'&id='+user_id,
    data : $("#smart-form-event").serialize(),
    success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
    }
});

谢谢！

【问题讨论】：

在执行添加事件功能的时候，是不是提交了某种形式的表单？
是的，模态对话框由表单组成，我通过 AJAX 提交给 DB。
请贴出表单的全部功能。

标签： javascript php jquery ajax fullcalendar

【解决方案1】：

您可以在插入新事件后调用“refetchEvents” http://fullcalendar.io/docs/event_data/refetchEvents/

$('#calendar').fullCalendar('refetchEvents');

...
success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
        $('#calendar').fullCalendar('refetchEvents');
    }
...

【讨论】：

嘿它工作，我一直在尝试使用 refetchEvents 但在错误的地方.. 非常感谢！干得好）

【解决方案2】：

尝试添加return false;

$.ajax({
    type : "POST",
    url : "ajax/add_event.php?start="+start.unix()+'&end='+end.unix()+'&id='+user_id,
    data : $("#smart-form-event").serialize(),
    success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
    }
});

return false;

return false; 必须在提交函数中。

$('form').submit(function(e){

    $ajax({...});

    return false;

});

【讨论】：

试试这个方法。我在发布之前没有看到编辑后的版本。
不，遗憾的是它也无济于事:(

【解决方案3】：

请试试这个。

$('#calendar').fullCalendar('destroy'); $('#calendar').fullCalendar({ 标题：{ 左：'上一个，下一个今天'， center: 'title', 强文本对：'月，基本周，基本日' //,议程周,议程日 }, 默认视图：'月'，可编辑：真，事件：我的事件 });

【讨论】：