JQuery callback happening too fast

ajaxasp.net-mvccallbackjquery

I am using ASP.NET MVC C#

I have a jQuery call that deletes a Book, then in the callback I call a function that refreshes the list of Books.

function rembook(id) {
        var agree=confirm("Deletion cannot be undone.  Continue?");
        if (agree)
        {
            jQuery.ajax({ url: "/Books/Delete/" + id, dataType: null, type: "POST", cache: true, callback: LoadBooks(), data: null });
            return false;
        }
        else
            return false;
    }

Here's LoadBooks(), if it matters:

function LoadBooks() {
        $(".BookList").hide();
        $(".BookList").load("/Books/Edit/<%= Model.AuthorID %>");
        $(".BookList").show('slow');
    }

The post works and the LoadBooks() function is called. However, the refreshed list of Books still contains the deleted book. If I then manually call the LoadBooks() function (via a link on the page), the books then reload without the deleted book. Why is the first Books reload still showing the deleted book? Is it happening before the actual deletion of the Book is completed?

(I get the same results with $.post("/Books/Delete/" + id, LoadProperties());)

Thanks.

Best Answer

callback: LoadBooks() should be just callback: LoadBooks,.

By using callback: LoadBooks() you're setting the callback to the return value of the function, not the function itself.

Additionally, I think it should be complete not callback.

Related Topic