jQuery Ajax using Deferred object

Question

I am using Ajax for ASynchronous post back and using Deferred object to wait for the response till i perform additional task based on the response.

Response message i am getting from PHP page and based on that i am performing further action on current page I want to know how do i pass response message(received from PHP page) from my Ajax function to deferred object. Also is my code correct?

Here is my code:

jQuery(document).ready(function($) {
var action = jQuery('#contactForm').attr('action');
function checkfunction() {
    $("#contactForm").submit(function() {
        return $.ajax({
            type: "POST",
            url: action,
            dataType: "html",
            data: $(this).serialize(),
            beforeSend: function() {
                //$("#loading1").show();
            },
            success: function(response) {


            }
            // return response;
        })
        return false;
    });
}
checkfunction()
        .done(function(response) {
            if (response == "success") {
                // Display success message
            } else {
                // Display Error message
            }
        })
        .fail(function(x) {
            // Display Error message
        }); 
});

@Manwal - no, it doesn't belong in codereview because this code does not work. — jfriend00
– jfriend00, Commented Jan 29, 2015 at 6:25

jfriend00 · Accepted Answer · 2015-01-29 06:21:16Z

2

You've got things a big mixed up. checkFunction() is not returning anything. The two return values you have in it are inside of other callbacks that aren't called until much later - long after checkFunction() has already returned.

I'm not quite sure what you were trying to do with the structure, but you can use the jQuery promise that the ajax call returns like this:

$("#contactForm").submit(function() {
    $.ajax({
        type: "POST",
        url: action,
        dataType: "html",
        data: $(this).serialize(),
    }).done(function(response) {
        if (response == "success") {
            // Display success message
        } else {
            // Display Error message
        }
    })
    .fail(function(x) {
        // Display Error message
    }); 
    // prevent default action of submit button
    return false;
 });

Also, it isn't going to do you any good to put all this inside of checkfunction() because all that would do is install the event handler which is both something you only ever want to do once and something where the action only occurs later when the actual .submit() event happens.

answered Jan 29, 2015 at 6:21

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3851557 Over a year ago

Can you please help me with correcting my code. Using deferred object for first time with Ajax. I am not sure how to return the ajax response message

Arun P Johny · Accepted Answer · 2015-01-29 06:27:36Z

0

You are not returning anything from the checkfunction method, so your code should throw an error

One possible solution is to return a custom promise from checkfunction like

jQuery(document).ready(function ($) {
    var action = jQuery('#contactForm').attr('action');

    function checkfunction() {
        var deferred = $.Differed();
        $("#contactForm").submit(function () {
            return $.ajax({
                type: "POST",
                url: action,
                dataType: "html",
                data: $(this).serialize(),
                beforeSend: function () {
                    //$("#loading1").show();
                },
                success: function (response) {


                }
                // return response;
            }).done(function (data) {
                deferred.resolve(data);
            }).fail(function () {
                deferred.reject();
            })
            return false;
        });

        //return a new promise
        return deferred.promise();
    }
    checkfunction()
        .done(function (response) {
        if (response == "success") {
            // Display success message
        } else {
            // Display Error message
        }
    })
        .fail(function (x) {
        // Display Error message
    });
});

answered Jan 29, 2015 at 6:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

jfriend00 Over a year ago

FYI, this would make checkfunction() a one-shot function (can only be used once) because calling it multiple times would create duplicate event handlers. It isn't clear what the OP's intent is in this regard, but worth pointing out. Also, kind of odd to have both a success handler and a .done() handler. You would generally want to select one system or the other.

Daniel · Accepted Answer · 2015-01-29 06:42:28Z

0

You need to build in a promise. There are ways as above shown, but I find the re-usability to be poor. Have a look at this structure.

var AjaxJSON = {
    send : function(url, data) {
        var def = $.ajax({
            method : "post",
            url : url,
            dataType : "json",
            data : data
        });
        return def.promise();
    }
};

$("#contactForm").submit(function () {
    var data = {formdata: $(this).serialize()}
    AjaxJSON.send("/my/path", data)
    .done(function(result) {
      if (response == "success") {
        // Display success message
      } else {
        // Display Error message
      }
    })
    .fail(function() {
       // do something
    });
}

answered Jan 29, 2015 at 6:42

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery Ajax using Deferred object

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related