Полный календарь Удаляет несколько событий - PullRequest
Новая
       77

Полный календарь Удаляет несколько событий

0 голосов
/ 08 апреля 2020

Полная версия календаря 4 работает с подключением к базе данных. Все работает как положено. У меня есть лицензия на планировщик, поэтому я могу использовать функции ресурсов.

Теперь у меня возникла проблема, когда я щелкаю событие, когда появляется модель. чем закрыть эту модель, открыть другое событие и выполнить действие с этой моделью. Это действие выполняется для обоих событий. Похоже, event.id запоминается с прошлого события. Надеюсь, у кого-то есть идея, как я могу решить эту проблему. это не очень полезно, когда я хотел удалить одно событие, и он удаляет несколько событий :-)

Это моя функция щелчка по событию: 

eventClick: function (info) {
  var id = info.event.id;
  var koppeling = info.event.extendedProps.klant_koppeling;
  $("#bekijkAfspraak").on("click", "#bekijk_koppel", function (e) {
    if ($(this).is(":checked")) {
      console.log("Klant koppeling: aan");
      koppeling = 1;
    } else {
      console.log("Klant koppeling: Uit");
      koppeling = 0;
    }
  });
  //save changed event information
  $("#bekijkAfspraak").on("click", "#show_save", function (e) {
    var plaatsnaam = $("input#bekijk_plaatsnaam").val();
    var opmerking = $("input#bekijk_opmerking").val();
    var klantnaam = $("input#bekijk_klantnaam").val();
    var aantal_8 = $("input#bekijk_aantal8").val();
    var aantal_14 = $("input#bekijk_aantal14").val();
    var actie = $("#bekijk_actie_dropdown").val();
    var inladen = $("#bekijk_laad_keuze").val();
    var id = info.event.id;

    $.ajax({
      type: "POST",
      url: "php/update_info.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&opmerking=" +
        opmerking +
        "&id=" +
        id +
        "&plaatsnaam=" +
        plaatsnaam +
        "&aantal_8=" +
        aantal_8 +
        "&aantal_14=" +
        aantal_14 +
        "&koppeling=" +
        koppeling +
        "&actie=" +
        actie +
        "&inladen=" +
        inladen,
      success: function (response) {
        console.log("Geupdate");

        Push.create("Afpsraak Geupdate", {
          body:
            "De afspraak van: " +
            plaatsnaam +
            " is geupdate Voor klant: " +
            klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 4000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //check cancel clicked on add Modal
  $("#afsrpaakAdd").on("click", "#add_cancel", function (e) {
    info.event.remove();
  });

  $("#bekijk_betaald_status").hide();
  //set the values and open the modal
  $("#bekijkAfspraak").modal("show");

  $("#startTime").html(
    info.event.start.toISOString().slice(0, 19).replace("T", " ")
  );
  if (info.event.end == null) {
    $("#endTime").html(
      info.event.start.toISOString().slice(0, 19).replace("T", " ")
    );
  } else {
    $("#endTime").html(
      info.event.end.toISOString().slice(0, 19).replace("T", " ")
    );
  }
  //Voeg afspraak informatie toe
  $("input#bekijk_plaatsnaam").val(info.event.title);
  // $("input#bekijk_actie").val(info.event.extendedProps.actie);
  $("#bekijk_laad_keuze").val(info.event.extendedProps.inladen);
  $("#bekijk_actie_dropdown").val(info.event.extendedProps.actie);
  $("input#bekijk_opmerking").val(info.event.extendedProps.description);
  $("input#bekijk_klantnaam").val(info.event.extendedProps.klantnaam);
  $("input#bekijk_aantal8").val(info.event.extendedProps.aantal_8);
  $("input#bekijk_aantal14").val(info.event.extendedProps.aantal_14);

  var klant_id = info.event.extendedProps.klant_id;

  //Delete
  $("#bekijkAfspraak").on("click", "#delete", function (e) {
    var id = info.event.id;
    $.ajax({
      type: "POST",
      url: "/planner/delete.php",
      data: "id=" + id,
      success: function (response) {
        console.log("Afspraak:", info.event.title + " Is Verwijderd");
        $("#bekijkAfspraak").modal("hide");
        // planning.refetchEvents();
        // info.event.remove();
        location.reload();
      },
    });
  });

  //maak vervoerslijst aan
  $("#bekijkAfspraak").on("click", "#vervoerslijst", function (e) {
    var id = info.event.id;
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    console.log("actie", actie);
    $.ajax({
      type: "POST",
      url: "/objects/functions/pdf/examples/example_mobox.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&actie=" +
        actie +
        "&id=" +
        id +
        "&klant_id=" +
        klant_id,
      success: function (response) {
        console.log("Voervoerslijst aangemaakt voor klant", klantnaam);
        var ifr = document.getElementById("iFramePdf");
        if (actie === "LB") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "LH") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "VB") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "VH") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "BZ") {
          printJS("/admin/vervoer/buiten/" + klantnaam + ".pdf");
        }
        Push.create("Veroerslijst aangemaakt", {
          body:
            "Voervoerslijst is juist aangemaakt voor " +
            klantnaam +
            "Type actie " +
            actie,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //verstuur bevesting naar klant
  $("#modalBevestig").on("click", "#verstuur", function (e) {
    var id = info.event.id;
    var start = info.event.start
      .toISOString()
      .slice(0, 19)
      .replace("T", " ");
    if (info.event.end == null) {
      var end = info.event.start
        .toISOString()
        .slice(0, 19)
        .replace("T", " ");
    } else {
      var end = info.event.end.toISOString().slice(0, 19).replace("T", " ");
    }
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    $.ajax({
      type: "POST",
      url: "verzendafspraak.php",
      data:
        "id=" +
        id +
        "&start=" +
        start +
        "&end=" +
        end +
        "&klantnaam=" +
        "&klant_id=" +
        klant_id +
        "&actie=" +
        actie,
      success: function (response) {
        console.log("Afpsraak  verstuurd naar klant", klantnaam);

        Push.create("Bevestiging gestuurd", {
          body: "De bevestiging is juist verstuurd naar " + klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
        $("#modalBevestig").modal("hide");
        planning.refetchEvents();
      },
    });
  });

  if (info.event.extendedProps.klant_koppeling == 1) {
    $("input#bekijk_koppel").prop("checked", true);
    $("#bekijk_klant_gegvens").show(1000);
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        var klantnaam = response.klantnaam;
        var telefoon = response.telefoon;
        $("input#bekijk_klantnaam").val(klantnaam);
        $("input#bekijk_Telefoon").val(telefoon);
        //check actie en voeg juiste adres toe
        if (
          info.event.extendedProps.actie === "VB" ||
          info.event.extendedProps.actie === "LH"
        ) {
          $("input#bekijk_adres").val(response.adres2);
          $("input#bekijk_inladen").val(response.laden_na);
        } else if (
          info.event.extendedProps.actie === "LB" ||
          info.event.extendedProps.actie === "VH"
        ) {
          $("input#bekijk_adres").val(response.adres1);
          $("input#bekijk_inladen").val(response.inladen);
        }
        if (response.locatie2 == null) {
          $("input#bekijk_boxLocatie").val(response.locatie);
        } else {
          $("input#bekijk_boxLocatie").val(
            response.locatie + " " + response.locatie2
          );
        }
        //einde van actie checken

        var boxnmrs = response.box1;
        var box = [
          response.box1,
          response.box2,
          response.box4,
          response.box4,
          response.box5,
          response.box6,
          response.box7,
          response.box8,
          response.box9,
          response.box10,
        ];
        for (var i = 1; i <= 10; i++) {
          if (box[i] == null) {
          } else {
            boxnmrs += " " + box[i];
          }
        }
        $("input#bekijk_boxNummers").val(boxnmrs);
      },
    });
    //end of ajax Klant koppeling
  } else {
    //Laat geen klant gegevens zien en zet checkbox op false
    $("input#bekijk_koppel").prop("checked", false);
    $("#bekijk_klant_gegvens").hide();
  }
  $("input#bekijk_koppel").on("change", function () {
    if ($(this).is(":checked")) {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").show(1000);
      $.ajax({
        type: "POST",
        url: "/planner/klantController.php",
        data: "klant_id=" + klant_id,
        dataType: "json",
        success: function (response) {
          var klantnaam = response.klantnaam;
          var telefoon = response.telefoon;
          $("input#bekijk_klantnaam").val(klantnaam);
          $("input#bekijk_Telefoon").val(telefoon);
          //check actie en voeg juiste adres toe
          if (
            info.event.extendedProps.actie === "VB" ||
            info.event.extendedProps.actie === "LH"
          ) {
            $("input#bekijk_adres").val(response.adres2);
            $("input#bekijk_inladen").val(response.laden_na);
          } else if (
            info.event.extendedProps.actie === "LB" ||
            info.event.extendedProps.actie === "VH"
          ) {
            $("input#bekijk_adres").val(response.adres1);
            $("input#bekijk_inladen").val(response.inladen);
          }
          if (response.locatie2 == null) {
            $("input#bekijk_boxLocatie").val(response.locatie);
          } else {
            $("input#bekijk_boxLocatie").val(
              response.locatie + " " + response.locatie2
            );
          }
          //einde van actie checken

          var boxnmrs = response.box1;
          var box = [
            response.box1,
            response.box2,
            response.box4,
            response.box4,
            response.box5,
            response.box6,
            response.box7,
            response.box8,
            response.box9,
            response.box10,
          ];
          for (var i = 1; i <= 10; i++) {
            if (box[i] == null) {
            } else {
              boxnmrs += " " + box[i];
            }
          }
          $("input#bekijk_boxNummers").val(boxnmrs);
        },
      });
      //end of ajax Klant koppeling
    } else {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").hide(1000);
    }
  });
  //kijk of betaald is
  $("#check_paid").click(function () {
    //$(this).hide(1000);
    $("#bekijk_betaald_status").hide();
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        console.log("verkrijg klant informatie..");
        var betaald = response.betaald;

        if (betaald === "ja") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("betaald");
        } else if (betaald === "nee") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Niet betaald");
        } else if (betaald === "nieuw") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Nieuwe klant");
        }
      },
    });
  });
},

1 Ответ

0 голосов
/ 08 апреля 2020

Это потому, что каждый раз, когда запускается eventClick, вы запускаете $("#bekijkAfspraak").on..., который создает обработчик событий для ваших кнопок. Но добавление обработчика событий не приводит к автоматическому удалению предыдущих обработчиков событий! К элементу может быть прикреплено много обработчиков событий, и все они обрабатывают одно и то же событие. Поэтому при следующем нажатии кнопки все обработчики событий, прикрепленные к этой кнопке, будут запущены. Вот почему он добавляет ваши предыдущие события календаря снова каждый раз.

Вам необходимо использовать .off () для удаления предыдущих обработчиков событий на этих кнопках перед добавлением нового.

например, написание 

$("#bekijkAfspraak").off("click", "#show_save")

незадолго до того, как связанная команда .on() удалит обработчик щелчка из кнопки "show_save".

Повторите тот же шаблон для всех остальных в обратном вызове eventClick.

...