how to avoid the multiple time event execution

Question

i am creating the event calendar.I added the bootstrap mode for adding new event. My problem is first work correctly but second time previously add data also re added. Next add 3 time. It looks like a loop. How can I avoid this scenario?

      <?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>

this is my written program. When I press submit button in bootstrap model Added Successfully massage display once then add the second event Added Successfully message alert in twist. Likewise it going to be loop process. How do avoid this error?

Answer 1

The issue from your code is that, every time addNewEvent(start,end); is called you are attaching an on click event handler to #add_event.

i.e:

1. The first time addNewEvent(start,end); is called, an onclick handler is attached to #add_event. When #add_event is clicked your operation fires once.
2. The second time addNewEvent(start,end); is called, another onclick handler is attached to #add_event. When #add_event is clicked your operation fires twice.
3. ...this will continue for as long as addNewEvent(start,end); is called

Solution:

The onclick handler should be taken out of addNewEvent(start,end);. You then attach the event handler once and set new values when addNewEvent(start,end); is called

Code:

$('#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
}