0

I've got an $.each loop, that is within another $.each that is calling a function to add values to my back end system.

My $.each loops are like this:

$.each(locations, function( i, location ) { 
    $.each(location, function( i, site ) {
        addsite ( site.url, site.address, site.zip, site.contact, site.id )
    })
})

When I call the function addsites directly, not from within the $.each loops it works as expected, however when called from within the $.each loops it works, but sometimes code is being called before other code has completed.

After lots of testing I've worked out it's due to $.ajax being called which obviously doesn't complete before the other code is run.

My working function is :

function addsite( url, address, zip, contact, id ) {
                
    // 1. lots of jquery
    // 2. lots of jquery
    
    $.ajax({ type: "POST",   
        url: url,
        cache: false,
        complete : function(text) {
            console.log ( '3.' + text )

        }
    });
    
    // 4. more jquery
})

I added debugging into points 1, 2, 3 and 4 and could see that everything in 1. and 2. is called correctly, but the code in 4. is being running before the $.ajax has completed.

When the function is called in the $.each loop, I see 1,2,4 multiple times in the console.log followed by multiple 3's as that is completing later. This needs to be running as 1,2,3,4.

I understand why that happens and have found adding async: false to $.ajax allows this to work, but that is depreciated so I'm trying to find a better way.

Do I need to do something to the $.each loops or the addsite function ? If it's the function I need to make sure this works when called directly not just from the $.each loops.

Could some advise how I can get this to work correctly.

Thanks

Tom
  • 1,436
  • 24
  • 50
  • Why not change the function to accept adding multiple sites at a time? Doing this you'll do a single request instead of multiple ones. – Mihai Matei Apr 06 '23 at 08:09
  • It isn't really clear what you are asking here. Is this about the second part of `addsite` running before the Ajax call in part one has resolved? Or is it about the `each` loop? – Quentin Apr 06 '23 at 09:24
  • My issue is in the addsite function and the code being run before `$.ajax` is completed. I'll add some additional comments to the original post. – Tom Apr 06 '23 at 09:26
  • Move the `2` code inside `complete` or `await $.ajax`. – Quentin Apr 06 '23 at 09:28
  • I tried moving 2 but that didn't help – Tom Apr 06 '23 at 09:38

1 Answers1

-1

I'm sorry that I didn't immediately see that it can't be used async: false in ajax request.

Now reworked the cycles on for of and add async await, made a test case:

//  for example, the location is only with id
const locations = [
  [
    {id: 1},
    {id: 2}
  ],
  [
    {id: 3},
    {id: 4}
  ]
];

//  your function
const addsite = async( url, address, zip, contact, id ) => {

  console.log(`before ${id}`); //  before ajax scripts
  
  await $.ajax({
    type: 'POST',   
    url: 'https://www.boredapi.com/api/activity', //  for testing
    cache: false,
    complete : function(text) {
      console.log(`${id} is complete`); //  site added
    }
  });
  
  console.log(`after ${id}`); //  after ajax scripts
  console.log(''); //  just divider
  
};

//  loops
(async () => {
  for (let location of locations) { //  first loop
    for (let site of location) { //  second loop
      await addsite(site.url, site.address, site.zip, site.contact, site.id);
    }
  }
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
imhvost
  • 4,750
  • 2
  • 8
  • 10