Question

我正在尝试将完整日历转换为使用表单。一切正常，除非您提交活动，然后尝试提交另一个活动。它似乎陷入了循环并将事件值应用于之前的eventid和新的eventid。

以下是一些显示正在发生的事情的截图。在第一个日期选择我得到我的表单弹出填充值并单击保存我得到我的警报（数据）消息。数据将在24日保存并插入。

现在点击25日添加另一个事件，弹出窗体这就是你可以在24日看到我的第一个事件，而新的创建活动是在25日。

enter image description here

我填写值点击保存我得到我的警报（数据）消息，点击确定后，它插入上一个事件是24日，然后显示另一个警报（数据） enter image description here

关闭第二个警报（数据）然后按照它应该插入第25个警报。 enter image description here

然后，如果我刷新页面，它们都会返回25日，所以它们都将它们作为第25个插入 enter image description here

以下是我用于插入的代码部分。如果您熟悉完整日历，您可能会知道这是什么。对我来说，似乎select函数持有每次点击。例如，如果我点击10号然后取消，然后点击15号，它仍然会被插入到10号。

   select: function(start, end, allDay) { 
   calendar.fullCalendar('unselect'); 
    var startDate = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var endDate = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
    $('#start').val(startDate);
    $('#end').val(endDate);
    $('#createEventModal').fadeIn(500);
    //Prevent default form action
    $('#createEventForm').on('submit', function(e){
        return false;
    });
    //Cancel Click close form
    $(document).on('click', '.close, .btnCancel', function(){   
      $('#createEventModal').hide('fast');
      document.getElementById("createEventForm").reset();
      calendar.fullCalendar('unselect');
    });
    //Submit event form click
    $('#submitButton').on('click', function(e){
      // We don't want this to act as a link so cancel the link action
      e.preventDefault();
      doSubmit();
    });
      function doSubmit(){
      var title = $('#createEventForm #title').val();
      if (title) {
       var data = $('#createEventForm').serialize();
       alert(data);
            $('#createEventModal').hide('fast');       
       $.ajax({
        url: wnm_custom.plugin_url+'/add_events.php',
       data: data,
       type: "POST",
         success: function(json) {
            document.getElementById("createEventForm").reset();
            $('div#myDialogSuccess').fadeIn(500);
            $('div#myDialogSuccess').fadeOut(2000);
         }
         });
         calendar.fullCalendar('renderEvent',
         {
         title: title,
         start: start,
         end: end,
         allDay: allDay
         },
         true // make the event "stick"
         );
         }
         calendar.fullCalendar('unselect');
         };
},

这是我的表格

<form id="createEventForm" class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEvent">Event:</label>
        <div class="controls">
            <input type="text" name="title" id="title" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">URL:</label>
        <div class="controls">
            <input type="text" name="url" id="url" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
     <div class="control-group">    
        <label class="control-label" for="inputUrl">Start:</label>
        <div class="controls">
            <input type="text" name="start" id="start" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">End:</label>
        <div class="controls">
            <input type="text" name="end" id="end" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
        <div class="control-group">
            <label class="control-label" for="when">Check for email alerts:</label>
            <div class="controls">
            <input type="checkbox" name="emailalerts" class="emailalerts" id="emailalerts"/>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btnCancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" id="submitButton" class="btn btn-primary" >Save</button>
        </div>        
    </form>

Answer 1

两次ajax调用，因为下面没有解除绑定事件。日历中的每个选项都将创建新事件。第一次它会罚款它只创建一个动作，第二次选择时间它创建其他事件1 + 1 = 2，第三次选择将使三个ajax调用2 + 1 = 3它将继续。

$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});

试试这个，在你参加那个活动之前总是需要关闭

$('#submitButton').off('click')
$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});

提交表单时完整的日历ajax循环

1 个答案: