Using AJAX to edit data from the database. (Fetch the data first to an input using AJAX and then update it to the database using AJAX)

Question

So i am basically new to AJAX and i am having a hard time fixing this issue. First, i have like a table. i have an onclick function that gets the id . <a href="javascript:void(0);" onClick="showEdit(this.id)" id="<?php echo $catrow['categoryid'];?>"></a> This is supposed to pick some data from the database using the id, store it in a modal, the modal can then be used to edit these data and then store it back in the database... all without reloading the page.

    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');

    },
});
}

this is the edit-check.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 }}?>

the code works well until this point...

then I have another function that is supposed to prevent this modal from submitting. (but it is not). the page just reloads

    $(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
        });
})    
});

`$("form#editCategory")` seems not working or not catching the event as you are dynamically adding the form in the document. — Dhaval Purohit, May 09 '20 at 08:34
try `$(".editCategory").on('submit',function(z){z.preventDefault()})`; — Dhaval Purohit, May 09 '20 at 08:35
@DhavalPurohit is right. Selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, and your event listeners will not match them - jQuery doesn't know about those new elements. You need to delegate your handlers to an element that exists at load, and filter to match only your target elements. This is a very common problem, and there are many duplicates and variations here on SO, [here's one](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery). — Don't Panic, May 09 '20 at 10:44

score 0 · Accepted Answer · answered May 09 '20 at 11:03

0

Thank you both. I tried this and it worked.

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

answered May 09 '20 at 11:03

Hanis Hapsa

129
1
7

Using AJAX to edit data from the database. (Fetch the data first to an input using AJAX and then update it to the database using AJAX)

1 Answers1