Jquery load external file that relies on jquery plugin

Question

I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:

1. The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).

2. If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.

Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.

Thanks.

Answer 1

You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.

Answer 2

Ha, well yes I know that and that is what I am trying to solve.

Yes I am loading a page into the DOM via the jquery-ui tabs.

Does this mean I need to load jquery twice, in my parent page and in the HTML that is loaded later? I tried doing this and it didn't work. I assume it didn't because the function call was not part of the parent's document.ready function. Not sure how to fix this "bad" design to achieve what I want.

Answer 3

I haven't used it yet, but I think that this is what you are looking for

Listen

This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings. Intead of bound, handlers for events, are registered along with matching selectors. And they'll still work for new added content. This is achieved, using Event delegation, so the plugin will only work for events that bubble