ФорумПрограммированиеJavaScript → Проблема с передачей данных к отправке AJAX

Проблема с передачей данных к отправке AJAX

  • yellowestgrin

    Сообщения: 1 Репутация: N Группа: Кто попало

    Spritz 8 июля 2023 г. 11:27

    Опишу совсем кратко
    Сейчас занимаюсь разработкой сайта для создания простых текстовых квестов
    На сайте есть веб-конструктор, редактор игр
    Внутри игра состоит из точек, которые заполняются текстом, картинками и переходами между этими точками
    Например: точка "1" - вы стоите перед дверью, действия "открыть дверь" это переход на точку "2", "уйти" - переход на точку "3", которые тоже заполнены и так далее
    Проблема в том, что данные не передаются на var formData
    Хотя если выводить в консоль их содержимое, то ни с чем (кроме фото), проблем нет
    Сам formData в консоли выводится {}, как и фото
    Возможно, у вас получится найти, в чем конкретно проблема в этом вопросе

    
    <script type="text/javascript">
        function createDraggablePoint(pointId) {
          var pointElement = $("<div>").addClass("point draggable");
          pointElement.attr("id", "point_" + pointId);
          pointElement.text(pointId);
          $(".constructor-field").append(pointElement);
    
          setTimeout(function() {
            pointElement.draggable({
              containment: "parent"
            });
          }, 0);
        }
    
        function createPopup(pointId) {
          var popup = $("<div>").addClass("popup");
          var form = $("<form>").addClass("popup-form").attr("enctype", "multipart/form-data");
    
          var title = $("<input>").attr({
            id: "point_title",
            type: "text",
            name: "point_title"
          });
          var fileInput = $("<input>").attr({
            id: "point_photo",
            type: "file",
            name: "image"
          });
    
          var textarea = $("<textarea>").attr({
            id: "point_desc",
            name: "point_desc",
            placeholder: "Введите текст"
          });
          var submitBtn = $("<input>").attr({
            type: "submit",
            value: "Сохранить"
          });
          var imagePreview = $("<img>").addClass("image-preview");
          fileInput.on("change", function() {
            var file = this.files[0];
            if (file) {
              var reader = new FileReader();
              reader.onload = function(e) {
                imagePreview.attr("src", e.target.result);
              };
              reader.readAsDataURL(file);
            }
          });
          form.append(title, imagePreview, fileInput, textarea, submitBtn);
          popup.append(form);
          $("body").append(popup);
    
          popup.draggable({
            containment: "parent"
          });
    
          form.on("submit", function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            formData.append("pointId", pointId);
            formData.append("point_title", $("#point_title").val());
            formData.append("point_desc", $("#point_desc").val());
            formData.append("point_photo", $("#point_photo")[0].files[0]);
            $.ajax({
              url: "edit-point.php",
              method: "POST",
              data: formData,
              processData: false,
              contentType:"multipart/form-data",
              success: function(response) {
                console.log(response);
                // Закройте всплывающее окно после успешного сохранения
                popup.remove();
              },
              error: function(xhr, status, error) {
                console.error(error);
                // Обработка ошибки при сохранении
              }
            });
          });
        }
    
        $(document).ready(function() {
          var pointCounter = <?php echo $result->num_rows+1; ?>;
    
          $("#add-point").on("click", function(event) {
            event.preventDefault();
            var pointId = pointCounter;
            createDraggablePoint(pointId);
    
            $.ajax({
              url: "add-point.php",
              method: "POST",
              data: { table: '<?php echo $table_name; ?>' },
              success: function(response) {
                console.log(response);
              },
              error: function(xhr, status, error) {
                console.error(error);
              }
            });
    
            pointCounter++; // Увеличение счетчика точек
          });
    
          <?php
          while ($row = $result->fetch_assoc()) {
            $pointId = $row['id'];
            echo "createDraggablePoint('$pointId');";
          }
          ?>
    
          $(document).on("dblclick", ".point", function() {
            var pointId = $(this).attr("id").split("_")[1];
            createPopup(pointId);
          });
        });
      </script>
    

Пожалуйста, авторизуйтесь, чтобы написать комментарий!