Опишу совсем кратко
Сейчас занимаюсь разработкой сайта для создания простых текстовых квестов
На сайте есть веб-конструктор, редактор игр
Внутри игра состоит из точек, которые заполняются текстом, картинками и переходами между этими точками
Например: точка "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>