Question

In my app I have jquery that is specific to each page, that is scripts that are used strictly on one page. Is there a way to set a scope that I can work within to avoid any id/class collisions or behaviour creeping from one page to another?

I could do this, for example by specifying the wrapper div for the specific page

$(function(){
  $('#thing_page input.finder').focus(function(){ ... })
});

but I would need to prepend all the event bindings with the name of the page wrapper, which is a bit annoying.

For those who don’t know, rails compresses all the javascript files in to one, which I like. Otherwise I could just include each file on a specific page.

Answer 1

You can wrap it all in a giant switch statements. Assuming thing_page is the id for the body, you could do this:

$(function() {
    switch (document.body.id) {
        case 'thing_page':
           // Do stuff for thing page
           $('input.finder').focus(function(){ ... });
           break;
        case 'other_page':
           // do stuff for other page
           break;
        case 'third_page':
           // Do stuff for third page
           break;
        // ...and so on and so forth...
    }
});

The syntax highlighting here is pretty bad. Take a look at it in jsfiddle: http://jsfiddle.net/dFuVz/

---

Alternatively, you might consider using an object to contain your functions (similar to @Andrew’s approach):

var pageFunctions = {
    thing_page: function() {
        // Code for thing_page
        $('#thing_page input.finder').focus(function(){...});
    },
    other_page: function() {
        // Code for other_page
    },
    third_page: function() {
        // Code for third_page
    }
};

// Now call the correct function, according to the body ID
pageFunctions[ document.body.id ]();

Again, since the syntax highlighting here is so terrible, look at it here: http://jsfiddle.net/9L592/