Question

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!

Answer 1

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.