JQuery - Nested AJAX

Question

I am trying to perform a nested AJAX call using the following code. The nested call doesn't seem to work. Am I doing anything wrong?

$.ajax({
type: 'GET',
url: "/public/customcontroller/dosomething",
cache: false,
dataType: "html",
success: function(html_input)
{
    $.ajax({
        type: 'GET',
        url: "/public/customcontroller/getjobstatus",
        cache: false,
        dataType: "html",
        success: function(html_input){
        alert(html_input);
        }
    });                                                                       
}
});

Depends, is the first call successful? Otherwise the function in success is never called. — Felix Kling
– Felix Kling, Commented Mar 30, 2010 at 19:58
I would call html_input something different in the inner function — Nick Craver
– Nick Craver, Commented Mar 30, 2010 at 19:59
The first call is successful. I renamed html_input to html_response in the inner function.. Still no luck.. — Jake
– Jake, Commented Mar 30, 2010 at 20:04
Just curious, why don't you have /public/customcontroller/dosomething return the data you're after? — Nick Craver
– Nick Craver, Commented Mar 30, 2010 at 20:16

Dave Swersky · Accepted Answer · 2010-03-30 20:04:36Z

5

You could be having thread-type issues, given that the outside call is asynchronous and may go out of scope before the success handler can come into play. Try breaking the success call out into a separate function.

answered Mar 30, 2010 at 20:04

Dave Swersky

34.8k9 gold badges83 silver badges120 bronze badges

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

1 Comment

atwellpub Over a year ago

Would love to see an example.

Ben · Accepted Answer · 2013-10-31 15:48:21Z

3

Try this

$.ajax({
type: 'GET',
url: "/public/customcontroller/dosomething",
cache: false,
dataType: "html",
async: false,
success: function(html_input)
{
    $.ajax({
        type: 'GET',
        url: "/public/customcontroller/getjobstatus",
        cache: false,
        dataType: "html",
        success: function(html_input){
        alert(html_input);
        }
    });                                                                       
}
});

edited Oct 31, 2013 at 15:48

answered Mar 30, 2010 at 20:10

Ben

16.6k9 gold badges47 silver badges65 bronze badges

2 Comments

php geek Over a year ago

:In the above code instead of "dataType" you should use "datatype".

Ben Over a year ago

@suraj api.jquery.com/jQuery.ajax/#jQuery-ajax-settings states that the option is named dataType.

Fernando Carvajal · Accepted Answer · 2018-01-25 17:36:56Z

0

Use the async/await syntax.

async function foo () {
    var html_input = await $.ajax({
        type: 'GET',
        url: "/public/customcontroller/dosomething",
        cache: false,
        dataType: "html"
    })

    var html_input2 = await $.ajax({
        type: 'GET',
        url: "/public/customcontroller/getjobstatus",
        cache: false,
        dataType: "html"
    })

    alert(html_input2)
}
foo().catch(e => console.log('some error:', e))

answered Jan 25, 2018 at 17:36

Fernando Carvajal

1,94321 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery - Nested AJAX

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related