Refactor repetitive jQuery code

Question

I would like to refactor the following piece of code from an old project.

$("#foo_div").html('').load('/some/route/', function(){
    // ... 
});

$("#bar_div").html('').load('/some/route/', function(){
    // ... 
});

$("#baz_div").html('').load('/some/route/', function(){
    // ... 
});

What the code does is to make an AJAX call and get some HTML result which will be then appended to the three divs. The result is always the same, so there's no need to have three identical calls.

Is there any way I could rewrite this code in order to run the call a single time, store the output and then append it to the three divs?

I don't want to use "async" so I'm looking for other means to do it.

Thanks.

Are the // ... codes identical too?

Lazar Ljubenović
– Lazar Ljubenović

2016-08-30 20:53:05 +00:00
Commented Aug 30, 2016 at 20:53 — Lazar Ljubenović
– Lazar Ljubenović, Commented Aug 30, 2016 at 20:53
Yes, they are identical.

Cosmin
– Cosmin

2016-08-30 21:13:30 +00:00
Commented Aug 30, 2016 at 21:13 — Cosmin
– Cosmin, Commented Aug 30, 2016 at 21:13

epascarello · Accepted Answer · 2016-08-30 20:52:47Z

11

Select all three elements and call load()

$("#a, #b, #c").html("").load('foo.html', function(){});

answered Aug 30, 2016 at 20:52

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Picko · Accepted Answer · 2016-08-30 20:53:47Z

3

You can use the jQuery.get function to perform this. See https://api.jquery.com/jquery.get/

$.get( "...", function( data ) {
  $("#foo_div").html(data);
  $("#bar_div").html(data);
  $("#baz_div").html(data);
});

answered Aug 30, 2016 at 20:53

Picko

1486 bronze badges

Comments

depperm · Accepted Answer · 2016-08-30 21:00:02Z

2

Assuming those ids are for divs you can reduce the query to be any div that has an id that ends in _div

$( "div[id$='_div']" ).html('').load('/some/route/', function(){
    // ... 
});

edited Aug 30, 2016 at 21:00

answered Aug 30, 2016 at 20:53

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Comments

Shivam Mathur · Accepted Answer · 2016-08-30 21:02:44Z

2

You can just group the ids in the jQuery selector

$.ajax( "...", function( data ) {
  $("#foo_div, #bar_div, #bar_div").html(data);
});

answered Aug 30, 2016 at 21:02

Shivam Mathur

2,73322 silver badges29 bronze badges

Collectives™ on Stack Overflow

Refactor repetitive jQuery code

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related