JQuery. Ajax request for each row in table -

i tried ajax request each row in table, can't achieve desired result

table:

<table>         <tr class="data">             <td class="editable">                 <a class="refresh btn btn-large" class="page">                     col 1                 </a>             </td>             <td class="editable">                 <a href="#" data-pk="10" id="query" class="query">                     col 2                 </a>             </td>         </tr>         <tr class="data">             <td class="editable">                 <a class="refresh btn btn-large" class="page">                     col 1 one                 </a>             </td>             <td class="editable">                 <a href="#" data-pk="10" id="query" class="query">                     col 2 1                 </a>             </td>         </tr> </table> 

ajax request

$("#detect_rel").click(function(){     $('.data').each(function(i, el) {          var query   = $(el).children('.editable').children('.query').text();         var page    = $(el).children('.editable').children('.page').text();          $.ajax({             url: 'wordstat/ajax?query='+query+'&page='+page,             success: function(data){                 $(el).children('.editable').children('.relevantnost').html(data)             }         });     }); }); 

my problem: ajax requests sent @ 1 time, need pause between requests.

p.s. attribute "id" in tags: should use cuz of "bootstrap x editor"

the issue ajax requests asynchronous if of them within .each() there no pause.

what need first take each of el elements , place them in array. create global variable counter know how many requests have been sent.

you send first request, , send second in success function of first, , on.

you need rewrite essentially, requests sent previous finished.

example:

function test() {     var arr = new array();     var counter = 0;      $('.data').each(function(i, el) {         arr.push(el);            });      dorequest(counter);      function dorequest(counter)     {         var query   = $(arr[counter]).children('.editable').children('.query').text();         var page    = $(arr[counter]).children('.editable').children('.page').text();          $.ajax({             url: 'http://www.google.com?'+query+'&page='+page,             success: function(data){                 alert("made request query="+ query);                    counter++;                 if(counter<arr.length)                 dorequest(counter);             }         });     }  } 

edit:

as saw other answers can include async: false, makes requests asynchronous.

an approach similar useful situations async:false not supported, or not preferable due blocking browser...

cross-domain requests , datatype: "jsonp" requests not support synchronous operation. note synchronous requests may temporarily lock browser, disabling actions while request active.

from: http://api.jquery.com/jquery.ajax/#jquery-ajax-settings