CODEWITHSUNDEEP
javascriptjqueryhtmlajax
a.atlam
a.atlam

Reputation: 742

JS multiple function execution

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?

Upvotes: 0

Views: 158

Answers (1)

adeneo
adeneo

Reputation: 318182

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);
});

Upvotes: 3

Related Questions