Javascript + jQuery call same function 4 times correct?

Question

I have a setup where divs that contain similar data (but ranked differently) need to dynamically load data on start up. To do this I load a PHP page through AJAX and pass a parameter so it knows what rank to query. However in order to load on start I need to call the same function 4 times in a row. Is this syntax correct? Or is there a way to write this without a big list of the same function being called

$(document).ready(function(){
    getStuff(1);
    getStuff(2);
    getStuff(3);
    getStuff(4);
});
function getStuff(type) {
    $.ajax({
       type: "GET"
       ..........
       success: function(html) {
          $('[data-id="' + type + '"]').html(html);
       }
    });
}


<div id="rank1" data-id="1"></div>
<div id="rank2" data-id="2"></div>
<div id="rank3" data-id="3"></div>
<div id="rank4" data-id="4"></div>

Don't know how your PHP works but can't you pass ranks as an array? Then PHP loops through array and creates one div for each rank. — user3524542
– user3524542, Commented Aug 19, 2014 at 14:33
there are multiple articles in each div, this div is a container so the database can have like 7 under id 1, 4 under id 2 etc etc.... so thats why i need to query for each rank and spit out the data — user934902
– user934902, Commented Aug 19, 2014 at 14:40

Atif · Accepted Answer · 2014-08-19 15:20:23Z

2

$(document).ready(function(){

  // edit as per taseenb@ comment for performance
  var size = $("div[id^=rank]").size()

  for(var i = 1; i <= size; i++){
    getStuff(i);
  }
});

edited Aug 19, 2014 at 15:20

answered Aug 19, 2014 at 14:32

Atif

10.9k22 gold badges68 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

taseenb Over a year ago

just a little performance and good practice bonus comment ;) i would not use a jquery selector in a for loop. save $("div[id^=rank]").size() into a variable before using it. don't make the browser run jquery selectors for no reason.

Atif Over a year ago

@taseenb Agreed. Fixed it. I normally do it that way but I wanted to win the Answers race here.

Jozef Dúc · Accepted Answer · 2014-08-19 14:32:26Z

1

Of course there is a way and it is called for loop :)

$(document).ready(function(){
    for(i = 1; i < 5; i++){  
       getStuff(i);
    }
});

answered Aug 19, 2014 at 14:32

Jozef Dúc

9632 gold badges18 silver badges29 bronze badges

Comments

stranger · Accepted Answer · 2014-08-19 14:33:22Z

1

Why don't you make getStuff take an array and make the AJAX calls in a loop?

Also, something to consider: AJAX is asynchronous (as implied by the name), so there's no guarantee that these calls will return in the same order you make them. If you need them to happen sequentially, you should make the calls recursively--make each subsequent call from the SUCCESS function of the previous call. That way you guarantee that the previous call has finished before you make the next call.

answered Aug 19, 2014 at 14:33

stranger

3984 silver badges19 bronze badges

4 Comments

Jozef Dúc Over a year ago

Or just add async : false to ajax

moonwave99 Over a year ago

NEVER do async : false, never.

Jozef Dúc Over a year ago

What is bad about async : false?

moonwave99 Over a year ago

You freeze the browser UI. And you lose all the benefits of using ajax basically.

moonwave99 · Accepted Answer · 2014-08-19 14:36:36Z

1

Select via [attribute] selector, iterate via $.each():

$('[data-id]').each(function(){

  var $this = $(this);

  $.get( '/some/url' {
     ..........
  }).done(function(html){

    $this.html(html);

  });  

})

answered Aug 19, 2014 at 14:36

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript + jQuery call same function 4 times correct?

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related