jQuery Ajax Request inside Ajax Request

Question

Is it possible to make an ajax request inside another ajax request? because I need some data from first ajax request to make the next ajax request.

First I'm using Google Maps API to get LAT & LNG, after that I use that LAT & LNG to request Instagram API (search based location).

Once again, is this possible, and if so how?

$('input#search').click(function(e) {
    e.preventDefault();
    var source = $('select[name=state] option:selected').text()+' '+$('select[name=city] option:selected').text()+' '+$('select[name=area] option:selected').text();
    var source = source.replace(/ /g, '+');
    if(working == false) {
        working = true;
        $(this).replaceWith('<span id="big_loading"></span>');
        $.ajax({
            type:'POST',
            url:'/killtime_local/ajax/location/maps.json',
            dataType:'json',
            cache: false,
            data:'via=ajax&address='+source,
            success:function(results) {
            // this is where i get the latlng
            }
        });
    } else {
        alert('please, be patient!');
    }
});

Could you post the code you have so far. – Rory McCrossan Apr 10 '12 at 13:15 — Rory McCrossan, Apr 10 '12 at 13:15
I've edit my question, the code is above – Bias Tegaralaga Apr 10 '12 at 13:20 — Bias Tegaralaga, Apr 10 '12 at 13:20

score 107 · Accepted Answer · edited Oct 17 '21 at 03:37

107

Here is an example:

$.ajax({
    type: "post",
    url: "ajax/example.php",
    data: 'page=' + btn_page,
    success: function (data) {
        var a = data; // This line shows error.
        $.ajax({
            type: "post",
            url: "example.php",
            data: 'page=' + a,
            success: function (data) {
   
            }
        });
    }
});

edited Oct 17 '21 at 03:37

Asef Hossini

655
8
11

answered Apr 10 '12 at 13:19

Tariq

2,853
3
22
29

1

Are you sure that is best practice? My friend thinks that I should use a flag variable and check it with a setInterval function outside – whamsicore Feb 02 '16 at 02:23
1

This may be a solution also, but this involves less effort and much easier. – Tariq Feb 03 '16 at 04:29
6

I can not express how helpful this answer was to me in trying to do a post inside the success of a get. – Bruce Sep 24 '16 at 04:50
This answer is not syntactically correct right? It just have two closing curly brackets – Menuka Ishan Oct 24 '16 at 11:37
1

I upvoted this one, but shouldn't that be done in the .done or .complete function to ensure the first request is done? – Daniel Apr 05 '17 at 15:22
2

@Daniel the `success` function will only run when ajax gets the `200 OK`, which ensures the first request returned something (hopefully) usable, but using `done` is also a good way to do it, without nesting. See more [here](https://stackoverflow.com/a/8847853/7232773) – M. Davis Jul 11 '17 at 15:35

Nishad Up · Answer 2 · 2018-05-10T07:03:38.607

28

Call second ajax from 'complete'

Here is the example

   var dt='';
   $.ajax({
    type: "post",
    url: "ajax/example.php",
    data: 'page='+btn_page,
    success: function(data){
        dt=data;
        /*Do something*/
    },
    complete:function(){
        $.ajax({
           var a=dt; // This line shows error.
           type: "post",
           url: "example.php",
           data: 'page='+a,
           success: function(data){
              /*do some thing in second function*/
           },
       });
    }
});

edited May 10 '18 at 07:03

answered Jul 04 '15 at 04:34

Nishad Up

3,457
1
28
32

3

Thanks a lot, your awnser saved me hehehe – GuiPab Jul 18 '18 at 14:24

score 4 · Answer 3 · edited Oct 15 '19 at 12:13

This is just an example. You may like to customize it as per your requirement.

 $.ajax({
      url: 'ajax/test1.html',
      success: function(data1) {
        alert('Request 1 was performed.');
        $.ajax({
            type: 'POST',
            url: url,
            data: data1, //pass data1 to second request
            success: successHandler, // handler if second request succeeds 
            dataType: dataType
        });
    }
});

For more details : see this

score 0 · Answer 4 · edited Jul 30 '17 at 03:22

$.ajax({
    url: "<?php echo site_url('upToWeb/ajax_edit/')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function (data) {
        if (data.web == 0) {
            if (confirm('Data product upToWeb ?')) {
                $.ajax({
                    url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
                    type: "post",
                    dataType: "json",
                    data: {web: 1},
                    success: function (respons) {
                        location.href = location.pathname;
                    },
                    error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
                        alert(xhr.responseText); // munculkan alert
                    }
                });
            }
        }
        else {
            if (confirm('Data product DownFromWeb ?')) {
                $.ajax({
                    url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
                    type: "post",
                    dataType: "json",
                    data: {web: 0},
                    success: function (respons) {
                        location.href = location.pathname;
                    },
                    error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
                        alert(xhr.responseText); // munculkan alert
                    }
                });
            }
        }
    },

    error: function (jqXHR, textStatus, errorThrown) {
        alert('Error get data from ajax');
    }

});

jQuery Ajax Request inside Ajax Request

4 Answers4

Linked

Related