0

I am developing a chrome extension and I need to read information from a page, insert the data into the database table and then move on to the next page and do the same thing.

The problem is that the function which inserts the data (using ajax) inserts 6 rows out of 45 before moving to the next page, which means that we are moving to the next page without inserting the rest of the data.

What I want it to do is to respect code order and insert all the rows into the database and then move on to the next page. the code is as follows :

for (elt of an) {
  var t = elt.getElementsByClassName('annonce_titre');

  if ((elt.id !== '')) {
    //console.log(().getElementsByTagName('a')[0].href);

    let titleH2 = t[0].getElementsByTagName('h2');
    let titleLink = t[0].getElementsByTagName('a');
    var url = titleLink[0].href;
    var title2 = titleH2[0].innerHTML;
    var last_item = 0;
    var w = elt.getElementsByClassName('titre_wilaya')[0].innerHTML;
    console.log(w);
    var wilaya = w.substring(w.length - 2, w.length);

    console.log("leg0 leng " + (w.length - 2) + " ** " + w.length)
    console.log("wilaya " + wilaya)
    if (isNumber(wilaya)) {
      var city = w.substring(0, w.length - 4);
    } else {
      var city = w;
      wilaya = 16;
    }
    console.log("w c " + wilaya + " ** " + city)

    var num = (elt.id).substring(4, 20)

    // ADD DELAY OF 5 SECONDS BETWEEN PAGE LOADS 
    var logger = setInterval(logNextTitle, 10);

    var inserts = [
      [title2, wilaya, city, url, num]
    ];


    test = test.concat(inserts);

    console.log('test spead ');
    $.ajax({
      data: {
        link: url,
        h2: title2,
        field: "auto",
        last: last_item,
        numero: num,
        wilaya: wilaya,
        city: city,
        items: test
      },
      type: "post",
      url: "http://localhost/insert.php",
      success: function(data) {
        console.log("Data Save: " + data);
      }
    });
  }
}

//window.open(first_link ,'_SELF');
console.log("first_link " + first_link)

What this code does is loop through all the elements of an array , insert the data into the DB using ajax and then moving to the next page . https://i.stack.imgur.com/S0aFe.jpg

This console shows that echoing "first_link" in the code is after the code for insertion , but the later is executed after the echo. There is a miss-order in javascript

Stphane
  • 3,368
  • 5
  • 32
  • 47
kadri r
  • 5
  • 1
  • Where in your code do you go to the next page? – Brett Gregson Sep 24 '19 at 14:55
  • window.open(first_link ,'_SELF'); it is commented out for testing only – kadri r Sep 24 '19 at 14:56
  • I'm not really sure what the question is? Are you asking why it only does 6 rows out of 45 items, or are you asking why the order is incorrect? – Brett Gregson Sep 24 '19 at 15:06
  • Both of them mean the same thing. If it is not executing the code after the console log. We would have finished all the inserts firts – kadri r Sep 24 '19 at 15:38
  • Asynchronous 101..... You make the calls and you do not wait for them to be done. https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done – epascarello Sep 24 '19 at 17:05

1 Answers1

0

Basics of asynchronous calls is they start and the code moves on. Problem with your code is you assume they are all done when they are still queued up waiting to be made. So you need to wait for them to all be done before you do it. Promises make it easier to do that. So look at using jQuery's when.

var ajaxCalls = []
for (elt of an) {
  ...
  ajaxCalls.push($.ajax({...}))
}
$.when.apply($, ajaxCalls).then( function () { console.log('done'); } );
// $.when(...ajaxCalls).then( function () { console.log('done'); } );
epascarello
  • 204,599
  • 20
  • 195
  • 236