How to ensure that a function is executed completely, before navigating to another page?

Question

I'm removing certain records using a webservice. The jquery ajax request is written in the onclick of a hyperlink. When im executing the script, line by line using firebug, it's getting removed otherwise it's not. Does any one meet any situation like this before? Please help

Code sample:

 $(".target").click(function() { 
            func();  //This function should be executed completely before navigating to another page
        });


 var func = function() {
            var items = $("#flag").find('td input.itemClass');
            id = items[0].value;
            var status = items[1].value;
            var type = items[2].value;
            var params = '{' +
                            'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
            $.ajax({
                type: "POST",
                url: "WebMethodService.asmx/DeleteItem",
                data: params,
                //contentType: "plain/text",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
                }

                //Event that'll be fired on Success

            });


    }

Joseph · Accepted Answer · 2012-05-07T10:19:21.527

3

jQuery ajax functions return deferred objects, thus we return $.ajax. Then you should use deferred.done to execute the callback when the AJAX is fully finished. When the AJAX is done, navigate away using JS instead:

var func = function() {
    ...
    return $.ajax({...});                   //return our ajax deferred
}

$(".target").click(function() { 
    var target = this;                      //preserve "this" since this in the callback may be different 
    func().done(function(){                 //our done callback executed when ajax is done
        window.location.href = target.href; //assuming .target is a link
    });
    return false;                           //prevent the natural click action
});

edited May 07 '12 at 10:19

answered May 07 '12 at 10:13

Joseph

117,725
30
181
234

1

Assuming that `.target` is a link, we might need to pop an `event.preventDefault()` somewhere there as well. You know, just in case. :) – Richard Neil Ilagan May 07 '12 at 10:18
1

@RichardNeilIlagan thanks, but I prefer the `return false` approach to add to the dramatic, *oh-my-gosh-so-similar effect*. **dun dun duuuuun!** :D – Joseph May 07 '12 at 10:20
ahahahaha :D I see what you did there :D – Richard Neil Ilagan May 07 '12 at 10:23

score 0 · Answer 2 · answered May 07 '12 at 10:15

You can use the async: false on the ajax call that is wait there to complete the call.

var func = function() {
            var items = $("#flag").find('td input.itemClass');
            id = items[0].value;
            var status = items[1].value;
            var type = items[2].value;
            var params = '{' +
                            'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
            $.ajax({
                type: "POST",
                async: false,
                url: "WebMethodService.asmx/DeleteItem",
                data: params,
                //contentType: "plain/text",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
                }

                //Event that'll be fired on Success

            });
    }

Alternative you can make the submit after the request.

$(".target").click(function() { 
            func();  //This function should be executed completely before navigating to another page
            return false;
        });

var func = function() {
            var items = $("#flag").find('td input.itemClass');
            id = items[0].value;
            var status = items[1].value;
            var type = items[2].value;
            var params = '{' +
                            'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
            $.ajax({
                type: "POST",
                async: true,
                url: "WebMethodService.asmx/DeleteItem",
                data: params,
                //contentType: "plain/text",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
                    $("#YourFormID").submit();
                }

                //Event that'll be fired on Success

            });

    }

score 0 · Answer 3 · answered May 07 '12 at 10:16

Simply move the Event to the "success" handler in your ajax request:

 $.ajax({
            type: "POST",
            url: "WebMethodService.asmx/DeleteItem",
            data: params,
            //contentType: "plain/text",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#deleteNotificationMessage").val("Item has been removed");
                //Event that'll be fired on Success
            }              

        });

Alternatively use jQuery ajax callback methods.

How to ensure that a function is executed completely, before navigating to another page?

3 Answers3

Linked