jQuery FullCalendar如何在ajax調用後顯示數據而無需刷新頁面

我試圖將jQuery FullCalendar與PHP和MySQL集成在一起。問題是，當我通過選擇帶有AJAX的日期來插入新事件時我不知道如何展示這個無刷新頁面新添加的事件。所以基本上這是FullCalendar電話：jQuery FullCalendar如何在ajax調用後顯示數據而無需刷新頁面

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數據庫..此後，我不知道如何顯示新增數據，而無需刷新頁面..在這裏的任何幫助？

另外：這是提交模式對話框的形式，當我的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'); 
    } 
});

謝謝！

來源

2014-12-19 Sangsom

您是否在執行add事件函數時提交某種形式？ – wayzz 2014-12-19 10:10:59

是的，模式對話由表單組成，我通過AJAX將數據提交給數據庫。 – Sangsom 2014-12-19 10:19:53

請發表郵件的全部功能。 – wayzz 2014-12-19 10:33:34

您可以將插入新的事件 http://fullcalendar.io/docs/event_data/refetchEvents/

$（ '＃日曆'）後，稱之爲「refetchEvents」 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'); 
    } 
...

來源

2014-12-19 10:44:16

嘿它工作，我一直在嘗試使用refetchEvents，但在錯誤的地方..非常感謝你!!幹得好） – Sangsom 2014-12-19 11:43:15

不客氣;） – 2014-12-19 11:48:18

嘗試增加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; 

});

來源

2014-12-19 10:22:29 wayzz

不會幫助這個 – Sangsom 2014-12-19 10:24:58

嘗試這種方式。發佈前我沒有看到編輯過的版本。 – wayzz 2014-12-19 10:27:26

Nop，不幸的是它也沒有幫助：（ – Sangsom 2014-12-19 10:32:20

請試試這個。

 




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

    $('#calendar').fullCalendar({ 
       header: { 

        left: 'prev,next today', 
        center: 'title',strong text 
        right: 'month,basicWeek,basicDay' 

        //,agendaWeek,agendaDay 
       }, 


       defaultView: 'month', 
       editable: true, 


       events: myevents 



      });

來源

2015-10-06 11:23:33

jQuery FullCalendar如何在ajax調用後顯示數據而無需刷新頁面

回答

相關問題