Использование AJAX для редактирования данных из базы данных. (Сначала загрузите данные на вход, используя AJAX, а затем обновите их в базе данных, используя AJAX)

Question

Так что я новичок в AJAX, и мне трудно исправить эту проблему. Во-первых, мне нравится стол. У меня есть функция onclick, которая получает идентификатор. <a href="javascript:void(0);" onClick="showEdit(this.id)" id="<?php echo $catrow['categoryid'];?>"></a> Это должно выбрать некоторые данные из базы данных с использованием идентификатора, сохранить их в модальном окне, затем модальное окно можно использовать для редактирования этих данных, а затем сохранить их обратно в базу данных ... и все это без перезагрузки страницы.

    function showEdit(catid){
$.ajax({
    url: "edit-check.php",
    type: 'POST',
    data: {"catid":catid},
    success: function(data){    
        console.log(data);
        var show = $('#showEdit').attr('id');
        document.getElementById(show).innerHTML = data; 
        $('#addContactModal').modal('show');

    },
});
}

это проверка редактирования. php

   <?php
    include ('../connect.php');
    if(isset($_POST['catid'])){
$id=$_POST['catid'];
$checkquery = "SELECT * FROM category WHERE categoryid='$id';";
$checkcategory=mysqli_query($conn,$checkquery);
if (mysqli_num_rows($checkcategory) == 0){
    echo ("//");
}
else{
    $crow = mysqli_fetch_assoc($checkcategory);
?>
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalTitle" aria-hidden="true">
        <form id="editCategory" autocomplete="off" enctype="multipart/form-data" method="post" name="form">
            <input type="text" class="form-control" name="category_id" id="category_id" readonly value="<?php echo $crow['categoryid'];?>">
            <input type="text" name='category_name' id="category_name" class="form-control form-control-danger" placeholder="Food" value="<?php echo $crow['categoryname'];?>">
            <input name="file" type="file" id='file' />
            <textarea class="form-control" name="about_category" id="about_category" rows="6"><?php echo $crow['aboutcategory'];?></textarea>

            <div class="modal-footer">
                <button type="submit" name="addCategoryBtn" id="add_category" class="btn btn-success"> <i class="fa fa-check"></i> Update Category </button>
                <button class="btn btn-dark" data-dismiss="modal"> Discard</button>
            </div>
        </form>

</div>
<?php }}?>

код работает хорошо до этого момента ...

тогда у меня есть другая функция, которая должен предотвратить отправку этого модального окна. (но это не так). страница просто перезагружается

    $(function() {
    $("form#editCategory").submit(function(z) {
    z.preventDefault();    
    var formData = new FormData(this);


        $.ajax({
            url: "add-check.php",
            type: 'POST',
            data: formData,
            success: function(data){
               alert('worked');
            },
            cache: false,
            contentType: false,
            processData: false
        });
})    
});

Answer 1

Спасибо вам обоим. Я попробовал это, и это сработало.

$('body').on('click', '#add_category', function(z) {z.preventDefault();});