Chained Jquery Ajax Calls

Question

I am trying to retrieve some information about any given webpage (namely the of the page and the of the domain) and then make a jquery asynchronous POST with the retrieved information. Unfortunately, the javascript execution reaches the $.post(), but never makes the actual web request. Here is my code:

$.get('../embed', {u: url}, function(html) {
    alert('got "' + html + '"');
    $.post('/media/add', { story: storyid, caption: caption, type: 5, title: title, content: html, meta: meta }, function(data) {
        var obj = jQuery.parseJSON(data); 
        var thumb = imageUrlFromMedia(obj);
        var clip = addToClipboard(obj.id, thumb || '/img/icons/embedly.png', obj.name);
    });
});

Is it even possible to make another ajax call in the success handler of $.get()? Has anyone here had any success with multiple chained HttpRequests before?

Answer 1

You can use $.ajax to find errors in the XML HTTP requests or JSON parsing (may not work for JSON parsing unfortunately). That should still display as text even if it fails to parse. Anyways, to get failure messages refactor as so

$.ajax({
  url: '../embed',
  data: {u: url},
  success: function(html){
    ..
     $.post
    ..
  },
  error: function(XMLHTTPRequest, textStatus, errorThrown){
     //Danger Will Robinson
  }
});

If you don't see a second request, this is the request that is failing. If you still don't find an error, try doing the same with the $.post. You should consider refactoring $.post to $.ajax. By the way, parseJSON is automatic if you use $.getJSON instead of $.post. This is akin to dataType: 'json' within $.ajax.

Answer 2

This can be done using native (no plugin) jQuery with the $.Deferred() classes.

This can be accessed most commonly using $.when().then() (see: http://api.jquery.com/jQuery.when/ ) or using more complex sequences using $.pipe() (see: http://api.jquery.com/deferred.pipe/ ).

There's an example here using $.pipe(): http://charliedigital.com/2011/07/15/chaining-jquery-ajax-calls/

For the simplest cases, I'd recommend using when-then. For more complex cases, you'll need to use pipe to build a larger chain of AJAX calls.