Subsequent Calls in Ajax

Question

I wrote a system in Web2py for a client, and he wants me to automate a procedure. I thought of using Ajax. The idea is the following:

I have a list of companies. Let’s say, 50. I want the screen to open with the list of companies and, at the top of them, have a "Start" button. When I click "Start", the page sends to the server an Ajax request asking to run a calculation for the first company. This is done because it is a heavy calculation, and leaving everything on a request would make Nginx return a timeout and the calculation would not go through.

How to update the status on the screen. Now comes my question.

After the calculation of the first company, the calculation of the second enterprise is automatically called. At the end of the second, it is called the calculation of the third, and so on, until the calculation of the other:

Empresa 1: Ok!
Empresa 2: Ok!
Empresa 3: Processando...
Empresa 4: Aguardando...
...

The idea is that I can also pass some parameters beyond the company code, as for example a date range.

How can I do this? Should I use pure Ajax or can I use a JS package for this?

Answer 1

I would do using async since Voce is willing to use an external library

$(function() {
  async.eachSeries($('td.usuario').toArray(), function(td, cb) {
    var $td = $(td);

    $.ajax({
        url: 'suaUrl',
    }).done(function(data) {
        cb(); //Use o objeto $td para alterar o status (.siblings('td'))
    }).fail(function() {
        cb(new Error('ops!'));
    });

  }, function(err) {
      if(err) {
          console.log('Algo deu errado...')
      }

      console.log('FIM!');
  });
});

HTML would look something like this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async.js"></script>

<table>
  <tr>
    <td class="usuario" data-user="101">Fulano</td>  
    <td>Aguardando...</td>  
  </tr>
  <tr>
    <td class="usuario" data-user="129">Ciclano</td>  
    <td>Aguardando...</td>  
  </tr>
  <tr>
    <td class="usuario" data-user="74">Beltrano</td>  
    <td>Aguardando...</td>  
  </tr>  
  <tr>
    <td class="usuario" data-user="2056">Asnésio</td>  
    <td>Aguardando...</td>  
  </tr>  
</table>

Answer 2

Assuming that all its elements are brothers (various lis for example, or rows of a table) you can make the call ajax in the first and - when completing it - pass next pro until no more:

$("#meuid li:eq(0)").each(function processar() {
    var $this = $(this);
    var parametros = $(...)...;
    var idEmpresa = $this.data("empresa");
    $.get(url, params, function(dados) {
        // Tratar dos dados
        $this.next("li:eq(0)").each(processar); // O each se encarrega da condição de parada
    });                                         // quando o next não retornar nenhum elemento
});

Here when using :eq(0) on the dial of next, I guarantee that at most a single element will be returned. Zero if there is none, and one if there is one. The call from each is for convenience even, one could simply use a function with parameter.

Answer 3

Normally I would make an accountant and go through the entire list until I reached the total number of companies:

var lista = $('.lista').find('li');
function calcular(loop){
    if (loop <= lista.length){
        var empresa = $('.lista').find('li:eq('+loop+')');
        $.getJSON(empresa.data('url'), function(data) {
           calcular(loop+1);
        }
    }
}
calcular(0);

Answer 4

Pure Ajax can solve your problem. The term varies - Cascading calls or Sequential async calls:

$.getJSON("http://example.com/jsoncall", function(data) {
        process(data);
        $.getJSON("http://example.com/jsoncall2", function (data) {
            processAgain(data);
            $.getJSON("http://example.com/anotherjsoncall", function(data) {
                processAgainAndAgain(data);
            });
        });
    });

In this case, you are responsible for ensuring the chaining in case something goes wrong.

Via Angularjs is even easier:

$q.all([asyncCall1(), asyncCall2() .....])