Where to put jQuery actions for extern loaded pages by UI tabs

Question

Hello,

I'm wondering where i should define my jQuerie actions for extern loaded pages by UI tabs.

So for example, i've got an index.html page including 3 tabs. Onclick each tab wil load extern1.html, extern2.html, extern3.html. These 3 external pages need several jQuery actions (onload-actions, onclick-actions and more).

When i put all jQueries for the external-pages into the index and i load one of the external pages, these jQueries will not affect the external loaded page when i click on a tab. When i put all jQueries for the external-pages into the external page itself it will cause troubles (i think), because when i load a tab/external page multiple times it will load the jQueries over and over again, right? So where i have to put my jQuery? (Some example?)

Many thanks!

Answer 1

put your jQuery on the mother html and use .live() function to bind the events you wanted. docs here.

Answer 2

You could put your code in tab-loaded event handler:

$('.your-tabs-container').tabs({
   load: function(event, ui) { /* your code here */ }
});

or:

$('.your-tabs-container').bind('tabsload', function(event, ui) {
  /* your code here */
});

In these cases, according to documentation, you can retrieve necessary UI info from ui argument:

ui.tab     // anchor element of the selected (clicked) tab
ui.panel   // element, that contains the selected/clicked tab contents
ui.index   // zero-based index of the selected (clicked) tab

Answer 3

You should only include the jQuery library once! On your index page. On the external pages, you should include the javascript used the for that individual external page:

Index:

• Include jQuery library

External 1:

• jQuery functions relevant for external page 1

External 2:

• jQuery functions relevant for external page 2

That's how I would do it :-)