JS multiple function execution

Question

I am using the youtube loadingbar tool found at www.onextrapixel.com, and it's pretty straightforward with regards to everything.

However, I have multiple <a> tags that have different href attributes and will load the content area (target) with different content. The problem is when I initialize the loadingbar function to a class, say:

$('ajax-call').loadingbar(options);

and I have multiple a tags with the same class say:

<a id ="link1" class = "ajax-call" href="hello1.html" data-type="POST" data-target="#Content_Area">Link 1</a>
<a id ="link2" class = "ajax-call" href="hello2.html" data-type="POST" data-target="#Content_Area">Link 2</a>
<a id ="link3" class = "ajax-call" href="hello3.html" data-type="POST" data-target="#Content_Area">Link 3</a>
<a id ="link4" class = "ajax-call" href="hello4.html" data-type="POST" data-target="#Content_Area">Link 4</a>

In this example I have 4 links, so the ajax call, along with success and done functions, is repeated 4 times. Each time it loads the same (correct) content and executes the same functions (correct functions) for each respective link, but it does that 4 times, which results in completely messed up everything, since I am initializing other objects (which get initialized 4 times).

All the content looks correct but nothing in the content area works (modals, etc.).

If I make only one link in the side menu, all works fine. If I initialize each link separately by ID, all works fine, but if I group them all in one class, this happens. How do I solve this?

you are missing the dot calling ajax-call class: $(".ajax-call").loadingbar(options) is a typo? — BeNdErR
– BeNdErR, Commented Apr 12, 2014 at 16:41

adeneo · Accepted Answer · 2014-04-12 16:40:56Z

3

classes starts with a period

$('.ajax-call').loadingbar(options);

And it looks like the plugin is poorly written, it does not return this.each(function().. it simply does

$.fn.loadingbar = function(options){
    el   = $(this),
    href = el.attr("href"),
    target = el.data("target"),
    ...etc

so calling it on a collection of elements probably doesn't work properly, try

$('.ajax-call').each(function() {
    $(this).loadingbar(options);
});

edited Apr 12, 2014 at 16:40

answered Apr 12, 2014 at 16:35

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

a.atlam Over a year ago

Fantastic !! Thanks alot !! Worked !! ... yeah honest mistake with the class thing

Collectives™ on Stack Overflow

JS multiple function execution

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related