时间戳

首页 > 解决方案 > 如何避免多次事件执行

php - 如何避免多次事件执行

问题描述

我正在创建事件日历。我添加了用于添加新事件的引导模式。我的问题是第一次正常工作，但第二次之前添加的数据也重新添加了。接下来加3次。它看起来像一个循环。我怎样才能避免这种情况？

      <?php
//index.php
include('header.php');

?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container" style="margin-top:30px">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-md-9">Holiday List</div>
        <div class="col-md-3" align="right">
          <a href="index.php" class="btn btn-info" role="button">Back To Home</a>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div id="calendar">
      </div>
    </div>
  </div>
</div>

<div class="modal" id="formModal">
  <div class="modal-dialog model-center">
    <form id="add_event_01">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Make New holiday</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="form-group">
          <select name="event_action" id="event_action" class="form-control">
            <option value="1">Holiday</option>
            <option value="2">Absant Day As Present</option>
          </select>
        </div>
        <div class="form-group">
            <input type="text" name="event_name" id="event_name" class="form-control" placeholder="Event Name" />
            <span id="error_event_name" class="text-danger"></span>
        </div>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" name="add_event" id="add_event" class="btn btn-success btn-sm">Submit</button>
        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
      </div>

    </div>
  </form>>
  </div>
</div>
  <script>

  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'timetable/load.php',
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     $('#formModal').modal('show');

      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

      addNewEvent(start,end);

    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"timetable/update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"timetable/update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"timetable/delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });

function addNewEvent(start,end) {
  $('#add_event').click(function(){

      var title = $('#event_name').val();
      var type = $('#event_action').val();
      $.ajax({
       url:"timetable/insert.php",
       type:"POST",
       data:{title:title,type:type, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        $('#formModal').modal('hide');
        alert("Added Successfully");
       }
      });

  });
}
  });

  </script>

这是我的书面程序。当我在引导模型中按下提交按钮时，已成功添加按摩显示一次，然后在扭曲中添加第二个事件已成功添加消息警报。同样，它将是循环过程。如何避免这个错误？

标签： phpmysql

解决方案

您的代码的问题是，每次addNewEvent(start,end);被调用时，您都将单击事件处理程序附加到#add_event.

IE：

  1. 第一次addNewEvent(start,end);被调用时，一个 onclick 处理程序被附加到#add_event. 单击时#add_event，您的操作会触发一次。
  2. 第二次addNewEvent(start,end);调用，另一个 onclick 处理程序附加到#add_event. 单击时#add_event，您的操作会触发两次。
  3. ...只要addNewEvent(start,end);被调用，这将持续

解决方案：

onclick 处理程序应该从addNewEvent(start,end);. 然后，您附加一次事件处理程序并在addNewEvent(start,end);调用时设置新值

代码：

$('#add_event').click(function(){
    var title = $('#event_name').val();
    var type = $('#event_action').val();
    var start = // get start global variable
    var end = // get end global variable
    $.ajax({
        url:"timetable/insert.php",
        type:"POST",
        data:{title:title,type:type, start:start, end:end},
        success:function() {
            calendar.fullCalendar('refetchEvents');
            $('#formModal').modal('hide');
            alert("Added Successfully");
        }
    });
});

function addNewEvent(start,end) {
    // Set start and end as global variables
}

推荐阅读