jQuery ajax “too much recursion”

Question

I have an procedure that runs throught 5 consecutive steps, and in my page, I'm calling an ajax method for each of them.

The idea is to run the first, if all is ok the second, and so on.

My code is:

$("#foo").click(function(){
    $.ajax({
        url: 'ajax.php',
        async: false,
        data: {
            step: 1
        },
        dataType: 'json',
        type: 'GET',
        success: walk_through(data)
    });
});

function walk_through(data)
{
    if(data.status == 'ok')
    {
        if(data.next_step == 'end')
        {
            // All steps completed
        }
        else
        {
            // Current step completed, run next one
            $.ajax({
                url: 'ajax.php',
                async: false,
                data: {
                    step: data.next_step
                },
                dataType: 'json',
                type: 'GET',
                success: walk_through(data)
            });
        }
    }
    else
    {
        alert("Error.");
        console.log(data);
    }
}

Im getting "too much recursion" error, even if my ajax calls are set as syncronous.. why?

Answer 1

Change

success: walk_through(data)

To

success: walk_through

You want the function walk_through to be the success handler, but you don't want to call the function immediately.

Answer 2

Your JavaScript is wrong on your AJAX call:

$.ajax({
    url: 'ajax.php',
    async: false,
    data: {
      step: data.next_step
    },
    dataType: 'json',
    type: 'GET',
    success: walk_through //You had walk_through(data), which makes a function call, rather than a reference to a function.
});

Answer 3

Your walk_through function is calling itself everytime it is succesful.