CODEWITHSUNDEEP
jqueryajax
fishbaitfood
fishbaitfood

Reputation: 659

Call function again from within ajax in ajax in same function?

Sorry for the confusing title, but I couldn't find a better way to explain it..

Here's the situation:

In a function overview(), I grab data with an AJAX call, together with dynamic html. Inside that AJAX success callback, I perform certain handlers to the new html. On one of those handlers, I'm posting another AJAX call.

Now, here's my problem: I want to reload the first AJAX call in the second AJAX success callback, to grab my updated data. How do I do this?

Thanks

EDIT: As requested, here's my code (simplified)

function overview() {
    var dataString = '...';
    $.ajax({
        type: 'POST',
        url: 'get-data.php?',
        cache: false,
        data: dataString,
        success: function(data) {
            $('table.table-overview tr.table-heading').after(data);

            $('tr.new-tr span.status').click(function() {
                var dataString = '...';
                $.ajax({
                    type: 'GET',
                    url: 'change-status.php?',
                    cache: false,
                    data: dataString,
                    success: function(response) {
                        if(response == 'saved') {
                            overview();
                        }
                    }
                });
            });
        }
    });
}

SOLVED: After some trial and error, replacing my .click() handler to .live('click') made it work!

Upvotes: 0

Views: 2879

Answers (3)

Jason Sperske
Jason Sperske

Reputation: 30416

To answer the added sub question, when you run this line of code

$('tr.new-tr span.status').click(function() {})

you are telling the browser to take every <span class="status"/> inside a <tr class="new-tr"/> that exists at that moment to attach a click event listener. .[live][1]('click') is different (), there you are saying for every click if it is on a inside a then call the function (this works for spans that didn't exist when the live event was bound). Both approaches are bad inside the success event of the ajax callback. You can bind the live even listener outside of your ajax calls first and then trust that it will only fire on <span class="status"/> inside a <tr class="new-tr"/> even if they are created later.

Upvotes: 2

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

I believe this is what you are describing. 

function ajax1(callback){

    $.ajax({
        ...
    }).done(callback);

}


function ajax2(callback){

    $.ajax({
        ...
    }).done(callback);

}


function overview(){

    loadAjax1(); // start off the ajax loading

}

function loadAjax1(){

    // get first ajax data
    ajax1(function(resp){

        $('body').html(resp) // put the ajax data in your dom, attach your handlers and such


        // find certain element to bind second ajax call
        $('body.find-your-item').click(function(){

            // when clicked, perform second ajax call, and on callback, recall intial ajax load
            ajax2(loadAjax1);
        });

    })

}

Upvotes: 0

cobolstinks
cobolstinks

Reputation: 7143

not sure i understand the problem. But you can chain ajax requests... So you can do something like

function func1(){
   $.ajax(){
      url: "whatever.html",
      type: json
      success: func2(data)
   }
 }

 function func2(input){
 //do something with input here

  $.ajax(){
      url: "whatever2.html",
      type: json
      success: func3(data)
   }
  }

I'm missing parameters in the ajax requests and the request in func2 could post data from the input parameter 'input'. Shouldn't be a problem to have multiple ajax requests on the page, you'll just have to worry about when they fire and make sure you pass the correct data from one to another...

Upvotes: 0

Related Questions