ajax through jquery

Question

I want to call pages using Ajax, and when one Ajax call completes, then other by click on button .first Ajax call works but after second ajax call not work.

$('document').ready(function(){
    $('.next').click(function(){
        var a=$("#cs_brief").val();
        var dataObj = {cs_brief : a};
        $.get('b.php',dataObj, function(data) {
            $('#division').html(data);
        });                 
    });
});

Answer 1

This functionality is achieved by using a simple queue in which ajax calls are executed one after another.

For this, setup a simple queue, like the one described in the following answer by Gnarf: Sequencing ajax requests, referenced below:

(function($) {
  var ajaxQueue = $({});
  $.ajaxQueue = function(ajaxOpts) {
    var oldComplete = ajaxOpts.complete;
    ajaxQueue.queue(function(next) {
      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);
        next();
      };
      $.ajax(ajaxOpts);
    });
  };
})(jQuery);  

and use it like

function executeAjaxCallsUsingQueue(variants) {
  for (var i = 0; i < variants.length; i++) {
    var variant = variants[i];
    $.ajaxQueue({
        url:  '/url_to_process' ,
        type:     'post', 
        data:  variant ,
        dataType: 'json' , 
        success:  function(response) { }
    });
  }
}

Answer 2

If you need to wait for 2 callbacks to complete you may use $.when So for instance:

var promiseA = $.get('a.php');
var promiseB = $.get('b.php');

$.when( promiseA, promiseB).done( function (dataA, dataB){
  $('#division').html(dataB);
});