CODEWITHSUNDEEP
javascriptjqueryajax
user1592380
user1592380

Reputation: 36227

Basic jquery deferred usage with ajax

I am trying to rewrite code from How to capture asynchronous ajax response into a variable? to use jquery deferred functions. I started with :

    var html ="";

    $.ajax({
                        type:"POST",
                        url: "Ajax/getHtml",
                        data: { u : contents },
                        dataType: 'html',       
                        success: function(data) {
                            html = data;
                        },

                        error: function(jqXHR, textStatus, errorThrown) {
                                console.log('error');
                                console.log(jqXHR,textStatus, errorThrown);
                        }
                    });

                     console.log('html', html);

I am trying to turn this into a deferred function which can be resolved when the requested html page is returned. I have been reading http://learn.jquery.com/code-organization/deferreds/examples/ and http://jqfundamentals.com/chapter/ajax-deferreds to do this. So far I've come up with :

                    var html_response = new $.Deferred(url){

                    $.ajax({
                            type:"POST",
                            url: "Ajax/getHtml",
                            data: { u : url},
                            dataType: 'html',       
                            success: html_response.resolve,
                            error: html_response.reject
                        });

                    };

This would be used as part of :

                    html_response().done{

                         console.log('html', html);

                   }

What I am trying to do is when the get_html function returns html sucessfully (i.e get_html is resolved )grab the html and send it to the console. I'm having trouble figuring out how to put the pieces together here. Could someone advise me please.

Upvotes: 0

Views: 112

Answers (3)

abl
abl

Reputation: 5958

You don't need a full Deferred here. You just need a Promise, whose interface is a subset of that of a Deferred (see the doc on Deferred for more info). The promise has a method .done() that lets you provide a callback to be executed when the asynchronous process ends successfully.

The $.ajax() method returns a jqXHR object which conveniently implements the Promise interface:

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise

So when you call $.ajax, you already have a promise. Just do:

$.ajax({
    ...
}).done(function(data){
    console.log(data);
});

Alternatively, if you really want to deal with a full Deferred object, you could do:

var defr = $.Deferred();

defr.done(function(data){
    console.log(data);
});

$.ajax({
    ...
    ,sucCess : function(data){
        defr.resolve(data);
    }
});

Upvotes: 1

leedotpang
leedotpang

Reputation: 106

What you are doing has the right concept. If I understand correctly, you are trying to do some "true asynchronous" ajax, unlike your last post.

The one thing you are doing incorrectly is resolving your deferred jQuery variable.

The correct code should look like this:

           var html_response = $.Deferred();    // no need for new

           function get_html(url){

                $.ajax({
                        type:"POST",
                        url: "Ajax/getHtml",
                        data: { u : url},
                        dataType: 'html',       
                        success:function(data) {
                            html_response.resolve(data);  //resolve is a fn
                        },
                        error: function(x, status, err) {
                            html_response.reject(err);    //reject is a fn
                        }
                    });

                };
           }

           get_html(inserturlhere);

                html_response.done(function(html){       // handle success
                     console.log('html:   ' + html);
                })
                .fail(function(error) {                 // handle failure
                    console.log(error);
                });

However, ajax comes explicitly with a defer already, so be sure to check that out first. http://api.jquery.com/jquery.ajax/

Upvotes: 1

Neve12ende12
Neve12ende12

Reputation: 1194

This works because $.ajax returns it's own promise (like animations), negating the need to create your own deferred object.

function html_response(url){
  return $.ajax({
    //ajax stuff
  });
}

html_response(url).done(function(data){
  console.log(data);
});

Upvotes: 1

Related Questions