2017-01-11 3 views
0

Я действительно схожу с ума по этому поводу. У меня есть внешние события, которые нужно удалить в календаре. Всякий раз, когда я пытаюсь удалить новое событие в календаре с существующими событиями на нем, все события обновляются в соответствии с данными недавно сброшенного события. В базе данных после добавления первого нового события второе новое событие дублирует и вставляет количество существующих событий в базе данных, но с разными датами, но те же заголовки и т. Д. Кроме того, я использую модальный выбор различных данных и вставьте их в базу данных.Функция eventUpdate обновляет все события в календаре

Ниже мой код для JS:

$("#save-assign").click(function() { 
    var batch; 
    var course = $("#course").val(); 
    var year = $("#year").val(); 
    var index = $("#year").prop("selectedIndex"); 
    if (index > 4) { 
     batch = course + '-' + year.substr(6,7); 
    } 
    else { 
     batch = course + '-0' + year.charAt(0); 
    } 

    $("#course-hidden").val(course); 
    $("#yrlvl-hidden").val(year); 
    var title = "<h5>Class Schedule for " + batch + "</h5>"; 

    $.ajax({ 
     url: eventurl, 
     type: "POST", 
     data: { action: "check", batch: batch }, 
     dataType: "json", 
     success: function(data) { 
      console.log(batch); 
      if (data.check == "true") { 
       alert("This section already exists."); 
       $("select").prop("selectedIndex", 0); 
      } 
      else { 
       console.log(data.check); 
       $("#title").html(title).fadeIn().show(); 
       $("#external-events").fadeIn().show(); 
       $("#assign").hide().fadeOut(); 
       $("select").prop("selectedIndex", 0); 

       $("#add-sched").fullCalendar({ 
        defaultDate: moment("2016-12-11"), 
        utc: true, 
        header: false, 
        columnFormat: 'dddd', 
        allDaySlot: false, 
        hiddenDays: [0], 
        defaultView: 'agendaWeek', 
        minTime: '07:00:00', 
        maxTime: '21:00:00', 
        editable: true, 
        droppable: true, 
        lazyFetching: true, 
        eventOverlap: false, 
    //    events: { 
    //     editable: true 
    //    }, 
    //     select: function(start, end) { 
    //      start = start.format("YYYY-MM-DD[T]HH:mm:SS+08:00"); 
    //      end = start.add(1, "h"); 
    //     }, 
        drop: function(event, ui) { 
         classname = $(this).attr("id"); 
        }, 
        eventRender: function(event, element) { 
         element.find('.fc-title').append("<br/><div class='desc'>" + event.description + "</div>"); 
         event.className = classname; 
        }, 
        eventReceive: function(event) { 
         $("#new-subj").modal("show"); 

         $("#save-subj").click(function() { 
          var subjcode = $("#subjcode").val(); 
          var start = event.start.format("YYYY-MM-DD[T]HH:mm:SS"); 
          var end = moment(start).add(1, "h").format("YYYY-MM-DDTHH:mm:ss"); 
          var prof = $("#prof").val(); 
          var profname = $("#prof option:selected").text(); 
          var room = $("#room").val(); 
          var roomname = "Rm. " + $("#room option:selected").text(); 
          var course = $("#course-hidden").val(); 
          var yrlvl = $("#yrlvl-hidden").val(); 

          console.log(event.id); 
          event.title = subjcode; 
          event.start = start; 
          event.end = end; 
          event.description = profname + "<br/>" + roomname; 
          event.className = classname; 

          $.ajax({ 
           url: eventurl, 
           type: "POST", 
           data: { 
            batch: batch, 
            subjcode: subjcode, 
            prof: prof, 
            start: start, 
            end: end, 
            room: room, 
            course: course, 
            yrlvl: yrlvl, 
            classname: classname, 
            action: "add" 
           }, 
           dataType: "json", 
           success: function(data) { 
            event.id = data.eventid; 
            console.log(data.eventid); 
            $("#add-sched").fullCalendar('updateEvent', event); 

            $("select").prop("selectedIndex", 0); 
           }, 
           error: function(e){ 
            console.log("adding event: "+e.responseText); 
           } 
          }); 

          $("#add-sched").fullCalendar('updateEvent', event); 

          $("#new-subj").modal("hide"); 

          $("#subjcode").val(""); 
          $("select").prop("selectedIndex", 0); 
         }); 

         $("#cancel-subj").click(function() { 
          calendar.fullCalendar('removeEvents', event.id); 
          getEvents(); 
         }); 
        }, 
        eventDragStop: function (event, jsEvent, ui, view) { 
         if (isElemOverDiv(jsEvent)) { 
          swal({ 
           title: "Are you sure you want to delete this subject?", 
           type: "warning", 
           showCancelButton: true, 
           confirmButtonColor: "", 
           confirmButtonText: "Delete", 
           closeOnConfirm: false 
          }, 
          function(isConfirm) { 
           if (isConfirm) { 
            $.ajax({ 
             url: eventurl, 
             type: "POST", 
             data: { 
              id: event.id, 
              action: "delete" 
             }, 
             dataType: "json", 
             success: function(data) { 
              console.log(data); 
              if (data.status == "success") { 
               console.log(event.id); 
               setTimeout(function(){ 
                calendar.fullCalendar('removeEvents', event.id); 
                getEvents(); 
                swal("Deleted", "The subject has been deleted.", "success"); 
               }, 2000); 
              } 
             }, 
             error: function(e){ 
              console.log('Error processing your request: '+e.responseText); 
             } 
            }); 
           } 
          }); 
         } 
        } 
       }); 
      } 
     }, 
     error: function(e) { 
      alert('There was an error while fetching events.'); 
      console.log(e.responseText); 
     } 
    }); 

    $("#assign-batch").modal("hide"); 
}); 

schedules.php

include($_SERVER['DOCUMENT_ROOT']."/config/db-config.php"); 

$action = $_POST['action']; 

if ($action == "add") { 
    $sql = "INSERT INTO schedules(batchid, subjectcode, prof_id, start, end, room, course, yearlevel, classname) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?)"; 
    $stmt = $conn->prepare($sql); 
    $stmt->bind_param("sssssssss", $batch, $subjcode, $prof, $start, $end, $rm, $course, $yrlvl, $classname); 
    $batch = $_POST['batch']; 
    $subjcode = $_POST['subjcode']; 
    $prof = $_POST['prof']; 
    $start = $_POST['start']; 
    $end = $_POST['end']; 
    $rm = $_POST['room']; 
    $course = $_POST['course']; 
    $yrlvl = $_POST['yrlvl']; 
    $classname = $_POST['classname']; 
    if ($stmt->execute()) { 
     $lastid = $conn->insert_id; 
     echo json_encode(array('status'=>'success','eventid'=>$lastid)); 
    } 
    else { 

    } 
} 

Мои журналы консольных при добавлении новых событий с указанием их event.id: enter image description here

ответ

0

Каждый раз, событие eventReceive запускается, вы добавляете еще одно событие «click» в Элемент «save-subj» - код «click», который вы определили, запускается снова. Но он просто добавляет другой обработчик, а другой, и другой, каждый раз. Предыдущие обработчики событий не удаляются. Они продолжают существовать и понимать «событие» (поскольку оно унаследовано от функции обертки) как «событие», как оно существовало при объявлении обработчика.

Поэтому каждый раз, когда вы перетаскиваете новое событие, все предыдущие обработчики запускаются (как вы заметили при регистрации), ссылаясь на каждый из ранее перенесенных событий по очереди, и этим событиям присваивается новый заголовок и описание используя текущее значение из элементов управления HTML в вашем модальном - поскольку вы каждый раз запрашиваете эти обновления.

Решение состоит в том, чтобы переместить весь блок $("#save-subj").click(function() { за пределы функции «eventReceive» в том месте, где вы уверены, что он будет выполнен только один раз (поэтому вы получаете только один экземпляр обработчика). Это оставляет вам проблему с тем, как вы передаете ему переменную «event», поскольку она больше не находится в пределах области действия. Я полагаю, что в функции eventReceive вы сохраняете идентификатор «события» где-то подходящим только перед тем, как открыть модальный - либо в атрибуте «data-» элемента в модальном, либо, возможно, в новой переменной JS, которая находится в scope для функции eventReceive и обработчика кликов. Затем в обработчике кликов измените его, чтобы он извлекал этот идентификатор события, а затем извлекает данные события из календаря, чтобы манипулировать им.

Если это не ясно, я могу составить пример короткого кода.