Abort ajax request

Question

I have a page where an ajax event grid is loaded. I also have on this screen a menu of actions.

Once accessed, the page is loaded (including the action menu), and the events grid, being heavier is loading separately.

What’s happening is that while the events table doesn’t fully load, I can’t trigger an action.

Example: I enter the page and the events grid starts loading (I see in the console the pending request) When I click on any link, the request is made, but only completed after the event grid finishes loading. At this moment, two pending requests are in the console only: the one of the event grid, and the one of the link I clicked.

Somebody’s got a light on how to fix this problem?

All requisitions are asynchronous. I think about aborting pending requests when clicking on an action, but how??

Answer 1

When you use the method $.ajax() jQuery returns an object that you can store in a variable. So:

var ajax = $.ajax(...);

this object has its own methods and one of them is the .abort(), so just use ajax.abort(); to cancel the order.

You can also solve the problem with the design of the code itself. That is, planning in the code to address this problem. But to help, I need to see how you got the code now. However a solution is the one I suggested above and what you yourself are looking for: cancel the order ajax.

Answer 2

You can do recursively, it only loads the next one at the end of the current one, so it is possible to enter a request in the middle and it abort the rest, loading what you want without waiting for the whole grid to be loaded.

As I have the same problem the solution was as follows

var arrTabela;//contem um array de id's para a consulta de cada linha da grade
var tot = 4; //pegar o total de linhas da tabelas 

function teste(arrTabela) {
    if(arrTabela < 0) return;
    return $.ajax({
        url : 'minha url q retorna o total',
        data: {id : arrTabela[0]},
        dataType: 'json',
        success: function(data){
            //subistitui o valor desejado
            $("#tot-list"+id).html(data);
            //remove o item usado no array
            arrTabela.splice(1,1);
            tot--;
            //chama novamente a função
            teste();
        }
    });
};

It wasn’t exactly like this, but the idea is this, sorry for the syntax errors that must have many, but I made this one in my head. I hope it helps!