CODEWITHSUNDEEP
javascriptjqueryajax
no1
no1

Reputation: 112

Jquery - Calling a ajax function within ajax function

Can I use ajax function withing a ajax function.

In my case there are two ajax calls. First ajax will return some data , If it is successful then the second ajax should be called .

Below is my code snippet,

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async: false,
    url: "my service url here"
    dataType = "json",

    //success - 1
    success: function(data) {

        //I ll collect the data from service 
        //now the second ajax must run.
        //Because in first call I ll receive some data 
        //That data I going to use in my second call   
        $.ajax({
                alert('inside ajax-2');
                type: "GET",
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    url: "my second service URL here",
                    dataType: "json",

                    //success - 2
                    success: function(data) {

                        //some functionality 

                    } //success-2
            } //success-1
        }); //ajax - 2
}); //ajax - 1

Some more info : I had checked chrome dev console and the error I am getting is

//success - 1
success: function(data) {
   //Error message : Uncaught SyntaxError: Unexpected identifier

That was the error message I got.

And yes I cleared the syntactical mistakes and I was getting the same error message.

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
async: false,
url: "my service url here",
dataType : "json"

//success - 1
success: function(data) {

    //I ll collect the data from service 
    //now the second ajax must run.
    //Because in first call I ll receive some data 
    //That data I going to use in my second call   
    $.ajax({
            alert('inside ajax-2');
            type: "GET",
                contentType: "application/json; charset=utf-8",
                async: false,
                url: "my second service URL here",
                dataType: "json",

                //success - 2
                success: function(data) {

                    //some functionality 

                } //success-2
        } //success-1
    }); //ajax - 2
}); //ajax - 1

I checked the service URL in RESTClient extension of firefox browser and again yes , there is Jsondata coming from that service.

Any good suggestion will be highly appreciable

Merry Christmas :)

Upvotes: 0

Views: 1577

Answers (4)

LeftyX
LeftyX

Reputation: 35587

There are some errors in your scripts.

In the first ajax call, where are the commas to separate the members ?

url:"my service url here",
dataType= "json",

and this should be:

dataType : "json",

Going back to your answer, yes you can but, what if you had the third ajax call?
Your code would be a mess and really hard to read.

The best would be to use promises.

This is the best way to work with asynchronous in javascript (that's also the reason why I've commented your async:false ).

You can read how promises work here.

$.ajax already returns a promise:

var promise = $.ajax({
       type: "POST",
       contentType: "application/json; charset=utf-8",
       url:"my service url here",
       dataType: "json",
    });

which could be chained with another one:

promise.then(function(result){ });

I tend to prefer the approach where I split my ajax call in different function which create a new promise and return it; just in case I want to manipulate the result:

You can split the two ajax calls:

function FirstAjaxCall()
{
    var deferred = $.Deferred();

    $.ajax({
       type: "POST",
       contentType: "application/json; charset=utf-8",
       // async : false,
       url:"my service url here",
       dataType: "json",
       success: function (jsonData) {
           deferred.resolve(jsonData);
       },
       error: function (req, status, error) {
           var errorMessage = (error.message) ? error.message : error;
           deferred.reject(errorMessage);
       }
    });

    return deferred.promise();

}

and

function SecondAjaxCall()
{
    var deferred = $.Deferred();

    $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       // async:false,
       url: "my second service URL here",
       dataType: "json",
       success: function (jsonData) {
            deferred.resolve(jsonData);
       },
       error: function (req, status, error) {
            var errorMessage = (error.message) ? error.message : error;
            deferred.reject(errorMessage);
        }
    });

    return deferred.promise();

}

Now you could resolve the first one and chain the second one:

FirstAjaxCall()
    .then(function(result){
        return SecondAjaxCall(result);
    })
    .then(function(result){
        // final result
    })
    .fail(function(reason){
        // reason should contain the error.
    });

As you can see FirstAjaxCall() is resolve in the .then() branch and it passes it's result in the anonymous function. Same thing happens with the second ajax call SecondAjaxCall(). If something fails in the first or the second call the errors are trapped here:

.fail(function(reason){
     // reason should contain the error.
 });

The beauty of promises is you can chain them or execute them in parallel.

Upvotes: 2

jhmt
jhmt

Reputation: 1421

You have to change "=" after the first "dataType" to ":" 

    dataType= "json", =>  dataType : "json",

and move "alert" function to the outside the second $ajax block.

  $.ajax({                      => alert('inside ajax-2');
        alert('inside ajax-2');    $.ajax({

Last, order of closing brackets are opposite.

         }//success-1   =>  });//ajax - 2
          });//ajax - 2    }//success-1

The following code should work as you thought.

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async:false,
    url:"my service url here"
    dataType : "json",    
    //success - 1
    success:function(data){

      //I ll collect the data from service 
      //now the second ajax must run.
      //Because in first call I ll receive some data 
      //That data I going to use in my second call

      alert('inside ajax-2'); 
      $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            async:false,
            url: "my second service URL here",
            dataType: "json",

             //success - 2
             success: function (data) {

                 //some functionality 

             }//success-2
         });//ajax - 2
     }//success-1
 });//ajax - 1

Upvotes: 0

Deepak Biswal
Deepak Biswal

Reputation: 4320

Try something like below in a structured way:

//First method with callback
function myFirstCall(callback) {
    $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async:false,
    url:"my service url here",
    dataType= "json",
    success:function(data){
       callback();
    });
}

// Second method
function mySecondCall() {
    $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async:false,
    url:"my second service url here",
    dataType= "json",
    success:function(data){
    });
}

//Let's trigger it
myFirstCall(function() {
  mySecondCall();
});

Upvotes: 0

romainm
romainm

Reputation: 281

Yes you can.

Something wrong in your code that I can see is that }//success-1 is before });//ajax - 2 and it should be after.

also there is a missing coma ( ,) after url:"my service url here",

replace the '=' you have by ':' for your two dataTypes.

your should correct that and try again.

Upvotes: 0

Related Questions