Handling multiple Ajax requests

Question

I'm developing an application which requires multiple ajax requests, such that Option2 will be only available when Button2 will be clicked and its response returned. Similarly, Option3 will be available only when Button3 has been clicked. Following is the general structure of the code. I'm building the app in php & mysql.

$("#button1").click(function() {
    $.ajax({
        type: "POST",
        url:  "url-1",
        data: { id: //some-id },
        success: function(response) {
            $('.menu-right').html(response);
            $(".button2").click(function() { //button2 is created when the above response is printed as html
                $.ajax({
                    type: "POST",
                    url:  "url-2",
                    data: { id: this.id },
                    success: function(response) {
                        $('.menu-right-jump').html(response);
                        $('.button3').click(function() { ////button3 is created when the above response is printed as html
                            $.ajax({
                                type: "POST",
                                url:  "url-3",
                                data: { id: this.id },
                                success: function(response) {
                                // some things to do
                                },
                                error: function(error) {
                                    alert("Error");
                                }
                            });
                        });
                    },
                    error: function(error) {
                        alert("Error");
                    }
                });
            });
        },
        error: function(error) {
            alert("Error");
        }
    });
});

Currently, everything works. The application will be for a maximum of 10,000 users. I just wanted to know if there was any way better of doing this/or any frameworks available that I can incorporate.

Also: What may be the problems that may arise using this way and ways to clear out those problems.

Answer 1

There is a cleaner way of doing it, with jQuery. Using the .ready function.

$("#button1").click(function() {
    $.ajax({
        type: "POST",
        url:  "url-1",
        data: { id: //some-id },
        success: function(response) {
            $('.menu-right').html(response);
        },
        error: function(error) {
            alert("Error");
        }
    });
});

//When I'm ready... provide a click event
$(".button2").ready(function(){
    $(".button2").click(function() { //button2 is created when the above response is printed as html
        $.ajax({
            type: "POST",
            url:  "url-2",
            data: { id: this.id },
            success: function(response) {
                $('.menu-right-jump').html(response);
            },
            error: function(error) {
                alert("Error");
            }
        });
    });
});
$(".button2").ready(function(){
    $('.button3').click(function() { ////button3 is created when the above response is printed as html
        $.ajax({
            type: "POST",
            url:  "url-3",
            data: { id: this.id },
            success: function(response) {
                // some things to do
            },
            error: function(error) {
                alert("Error");
            }
        });
    });
});

The problems that arrive doing it your way. Due too much nesting (For instance, if you need to add 4 more buttons) it could lead too.. technical debt which is much harder to maintain.

Avoid creating deeply nested if-then statements since they are harder to read and error-prone to maintain. source

You could go further with this, and better encapsulate each ajax request into a singular function and write your own jQuery callback.

Answer 2

you can also use jquery's .on functionality to not have to nest those

$('body').on('click' ,'.button2', doButton2request);
$('body').on('click' ,'.button3', doButton3request);

$("#button1").click(doButton1request)

function doButton1request()
{
    do ajax and on success put in the new button
}

function doButton2request()
{
   do ajax and on success put in the new button
}

function doButton3request()
{
   do ajax and on success do "some things to do"
}

the on function wires up the event so that whenever anybody clicks on anything (within 'body'), if the class is .button2 for example, it calls the function with that (this) being the item matched. you you can add and remove the button or the .button2 class as needed. also with .off you can temporarily stop those events from firing.

So the general idea is, whenever you have clickable items that won't exist at the beginning of the app, you can set up an .on event. Or, you can have items that don't receive clicks until they have another class added, like ".active" or something.