Как обновить событие, измененное на fullcalendar bootstrap?

Question

Я меняю событие на fullcalendar bootstrap в модальное, а затем clik на событие.

изменить название, но затем нажмите на кнопку отправить модальный событие не обновляют, мне нужно 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); 
     } 
    }); 
} 

==> это еще не испытанные!