如何刷新已更改为完整日历引导的事件

Question

我将事件更改为fullcalendar bootstrap为modal，然后单击事件。

我改变了标题，但然后点击提交模式按钮事件不刷新，我需要F5重新加载页面。

我如何刷新我的事件自动更改然后点击提交按钮?

我的代码是:

$('#submitButtonEdit').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();
    doSubmitEdit();
});
function doSubmitEdit(){
    $("#createEventModalEdit").modal('hide');
    console.log($('#apptStartTime').val());
    console.log($('#apptEndTime').val());
    console.log($('#apptAllDay').val());
    console.log($('#id').val());
    var title = $('#patientName2').val();
    var start = $('#apptStartTime').val();
    var end = $('#apptEndTime').val();
    var allDay = $('#apptAllDay').val();
    var idEvent = $('#id').html();
    $.ajax({
        url: 'process.php',
        data: 'type=changetitle&title='+title+'&eventid='+idEvent,
        type: 'POST',
        dataType: 'json',
        success: function(response){
            if(response.status == 'success'){
                var event_obj = $('#calendar').fullCalendar('clientEvents', idEvent);
                $('#calendar').fullCalendar('updateEvent', event_obj);
            }
        },
        error: function(e){
            alert('Error processing your request: '+e.responseText);
        }
    });
    $("#calendar").fullCalendar('renderEvent', {
        title: $('#patientName2').val(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        allDay: ($('#apptAllDay').val() == "true"),
    }, true);
}


    <div id="createEventModalEdit" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
          <h3 id="myModalLabel1">Crear tarea</h3>
      </div>
      <div class="modal-body">
        <form id="createAppointmentForm" class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputPatient">Tarea:</label>
                <div class="controls">
                    <input type="text" name="patientName2" id="patientName2" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
                    <input type="hidden" id="apptStartTime"/>
                    <input type="hidden" id="apptEndTime"/>
                    <input type="hidden" id="apptAllDay" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="start">Inicio:</label>
                <div class="controls controls-row" id="start" style="margin-top:5px;">
                </div>
                <label class="control-label" for="end">Fin:</label>
                <div class="controls controls-row" id="end" style="margin-top:5px;">
                </div>
                <label class="control-label" for="start">Inicio:</label>
                <div class="controls controls-row" id="id" style="margin-top:5px;">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button type="submit" class="btn btn-primary"     id="submitButtonEdit">Save</button>
    </div>
</div>
</div>
</div>

Answer 1

伪代码:

Get the event object
Open Modal, edit
update the event Object with the data from the modal
update Calendar with event Object
Send out Ajax

备注:

• $('#calendar').fullCalendar('clientEvents', idEvent);返回一个事件数组，即使过滤为一个ID。
• $("#calendar").fullCalendar('renderEvent', {...在时间轴上创建一个新事件

一些变化:

function doSubmitEdit(){
    // get event object
    var event_obj_arr = $('#calendar').fullCalendar('clientEvents', idEvent);
    var event_obj = event_obj_arr[0];
    // edit
    $("#createEventModalEdit").modal('hide');
    console.log($('#apptStartTime').val());
    console.log($('#apptEndTime').val());
    console.log($('#apptAllDay').val());
    console.log($('#id').val());
    // update event object properties
    event_obj.title = $('#patientName2').val();
    event_obj.start = moment($('#apptStartTime').val());
    event_obj.end = moment($('#apptEndTime').val());
    event_obj.allDay = $('#apptAllDay').val() || false;
    // var idEvent = $('#id').html(); NEVER CHANGE THIS!
    // update calendar, you may put this line into success method
    $('#calendar').fullCalendar('updateEvent', event_obj);
    // post to server
    $.ajax({
        url: 'process.php',
        data: 'type=changetitle&title='+title+'&eventid='+idEvent,
        type: 'POST',
        dataType: 'json',
        success: function(response){
            if(response.status == 'success'){
                // nothing to do here
            }
        },
        error: function(e){
            alert('Error processing your request: '+e.responseText);
        }
    });
}

==>还没有测试!