CODEWITHSUNDEEP
jquery
Lee Loftiss
Lee Loftiss

Reputation: 3195

How to "modularize" a jQuery app?

I want to build a jQuery app that can have multiple instances on a single page.

However, I am running into this problem that one instance receives events from other instances. For example, if I have the following event:

$('#start_btn').click(...)

If any #start_btn on the page is clicked, then all the instances start.

So, how do I design the code so each instance only interacts with the elements within its own HTML code?

Update - If you are here with the same type of question; I found this is the wrong approach. jQuery plugin design is the best approach.

http://learn.jquery.com/plugins/

Upvotes: 1

Views: 272

Answers (3)

jsalonen
jsalonen

Reputation: 30481

IDs are ment to be unique per-document. Don't use them. Instead, use a general-purpose class attribute to identify individual applications and classes (again) inside these instances too point into specific parts of the application.

Example HTML:

<div class="app">
  <a class="start-button" href="#">button1</a>
</div>
<div class="app">
  <a class="start-button" href="#">button2</a>
</div>

Assuming the above, you can now determine the application in which the start button was clicked:

$('.start-button').click(function(event) {
    var app = $(event.target).closest('.app');
    // Do stuff
});

Now if you want to do stuff inside that specific application, you can just use the app or some other top reference to keep the changes inside that app only.

For instance, hiding the button when clicked:

$(app, '.start-button').hide();

For a full running example, see this Fiddle: http://jsfiddle.net/8Xtue/2/

What I'm presenting here is a simple foundation for a JavaScript application framework. If this is the style you are writing your applications, you might want to consider some ready framework like AngularJS (http://angularjs.org/), which already provides you with a very well thought framework on working this kind of embeddable, JavaScript applications.

Upvotes: 1

ginman
ginman

Reputation: 1315

You can namespace your controls.

If you post the code for your page, i can update this answer, however this is what it might look like

<div id="page1">
  <button class=".startBtn">
</div>
<div id="page2">
  <button class=".startBtn">
</div>

Then in the jquery

$("#page1 > .startBtn").click()
$("#page2 > .startBtn").click()

OR, if they are not direct parent child

$(".startBtn", "#page1").click()
$(".startBtn", "#page2").click()

Some documentation here: http://api.jquery.com/child-selector/

NOTE: I changed the startBtn to a class instead of an ID, as we generally want to avoid having duplicate IDs within the DOM.

Upvotes: 0

Joe Enos
Joe Enos

Reputation: 40393

You should never have two controls with the same ID on the same page. If you want absolutely separated pages, you may want to put each app in its own IFRAME, with its own full context, then they'll be totally segregated.

I suppose it depends on exactly what these things do, and how big and complex everything is.

Upvotes: 2

Related Questions