Laravel/Ajax delete function not refreshing my table after success

Question

when I add my function fetchcategory(); in my delete ajax, my table is not refreshing:

        $(document).on('click', '.delete_category_btn', function (e) {
            e.preventDefault();
            var cat_id = $('#delete_cat_id').val();
            alert('Category Deleted!');
            // location.reload();  
            $('#deleteCategoryModal').modal('hide'); 
            fetchcategory();
            
            //token taken from laravel documentation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "DELETE",
                url: "/clinical/bbr-category-configuration-delete/"+cat_id,
                dataType: "dataType",
            });
        });

for a reference, my screenshot shows the alert, showing that the delete function follows through:

another reference is that my add function here reloads the page after a new table is added:

            $.ajax({
                type: "POST",
                url: "/clinical/bbr-category-configuration",
                data: category_data,
                dataType: "json",
                success: function (response){
                    console.log(response);
                if(response.status == 400) {
                    $('#category_formCheck').html("");
                    $('#category_formCheck').addClass('alert alert-danger');
                    $.each(response.errors, function (key, err_values) {
                        $('#category_formCheck').append('<li>'+err_values+'</li>');
                    });
                    }
                else  
                  {
                    $('#category_notif').html("");
                    $('#category_notif').addClass('alert alert-success');
                    $('#category_notif').text(response.message);
                    $('#createCategory').modal('hide');
                    fetchcategory();
                    }
                }
            });

another problem of mine is that I tried to add the alert and refresh function inside:

            $.ajax({
                type: "DELETE",

but they do not show up, so I placed them inside on(click

why is my delete ajax not refreshing my table?

UPDATE:

I am aware of location.reload(); but adding this defeats the purpose.
the data does get deleted, I have to manually refresh the whole page to see the changes though.

When you place them inside onClick, they are called before the item is deleted. Instead, you have to find out why they aren't called after the delete is executed. Is the delete successfull? — shaedrich
– shaedrich, Commented Jun 25, 2021 at 8:59
@JohnLobo yes i am aware, but that defeats the purpose of ajax — user16218026
– user16218026, Commented Jun 25, 2021 at 9:04
@shaedrich yes the delete is successful, ill update my description — user16218026
– user16218026, Commented Jun 25, 2021 at 9:04
Try re-adding the reload function to your delete success callback and add a console log to it to check if it is called. And you don't have any error messages in your browser dev tools? — shaedrich
– shaedrich, Commented Jun 25, 2021 at 9:07

John Lobo · Accepted Answer · 2021-06-25 09:29:19Z

You can do it in ajax success. I believe fetchcategory() method is populating data to table

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });


    $(document).on('click', '.delete_category_btn', function (e) {
        e.preventDefault();
        var cat_id = $('#delete_cat_id').val();

        // location.reload();
        $('#deleteCategoryModal').modal('hide');

        $.ajax({
            type: "DELETE",
            url: "/clinical/bbr-category-configuration-delete/"+cat_id,
            dataType: "dataType",
            success: function(data) {
                alert('Category Deleted!');
                fetchcategory();
            },
            error: function() {
                alert('Error occured');
            }
        });
    });
</script>

Collectives™ on Stack Overflow

Laravel/Ajax delete function not refreshing my table after success

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related