Question

I have an Ajax function triggered by a button click like this:

$.ajax({
            type: "POST",
            dataType: 'json',
            url: "DBDeleteList.php",
            data: {listID: listID},
            success: refreshMenus($(this))
});  

The PHP file executes successfully and the database is updated.

The refreshMenus() is called and I call a .load() to re-fresh the menus to reflect the updated Database, however the load functions seems to load the content to soon (before the database update has been registered).

Basically what happens is is that if when I load the content from the page via Jquery .load it doesn’t refresh. If I refresh the page manually (e.g. f5) the database is updated and it displays the menu correctly.

Here is the refreshMenus():

 function refreshMenus( list ) {
    list.parents('li').remove();
    $('#sortableLoader').load(window.location.href + ' #sortableMenu');
 }

The Div ID sortableMenu is updating, it’s just updating too early I suppose.

Answer 1

Your refreshMenus($(this)); is being called immediately before the completion of ajax and keep $(this) into a variable outside of ajax function. So try this

var el = $(this);
$.ajax({
    type: "POST",
    dataType: 'json',
    url: "DBDeleteList.php",
    data: { listID: listID }
    success: function(){ 
        refreshMenus(el);
    }
});