CODEWITHSUNDEEP
javascripthtml
moonwalker
moonwalker

Reputation: 485

Including javascript files

I'm finishing my project right now and see that I've got a lot of javascript code on each page. It's not included as a ".js" file, but rather coded in the page itself. I figured it's a bad idea, so now I'm trying to put them all in one .js file and include it in each page.

The only problem I'm facing now is this: Some functions are only called on certain pages and are depending on the inclusion of jquery plugins. Not all pages needs the plugin however.

Example: On the home page I need to chain the Country dropbox with the City dropbox, thus I need the jchained.js plugin for jquery. The code I need to use is:

$(function(){
    $("#city").chained("#country");
});

When I add this function to the .js file, and I open a page where I don't need to chain the dropboxes I get logically an error:

TypeError: $("#city").chained is not a function

So if I understand this correctly, in order to use a .js file with all my different functions for different plugins, I need to include all the plugins to all the pages?

Thanks for your ideas & help.

Upvotes: 0

Views: 128

Answers (2)

Sean Thompson
Sean Thompson

Reputation: 902

Personally, I don't think you should worry about including alot of .js files, that's part of web development. Another option, albeit slightly more tedious, is you can make a check for the function to exist (if the plugin .js has been included) and then call it if it does:

if(typeof yourFunctionName == 'function') {
    yourFunctionName();
}

Upvotes: 1

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

It completely depends on how the code is structured or how complex the current code is.

An immediate solution will be,

  1. Give an id to each page (may be on body tag).
  2. Put all the code in a single external JavaScript file.

  3. Execute the code meant for that particular page only if it has required id on that body element. Something like :

    if ( $('body').attr('id') == "home" ) { /* Add home page JS here */ }

You can try this.

Correct me if I am wrong.

Upvotes: 1

Related Questions