jQuery .load() and sub-pages

Question

Hi,

I am not just a newbie with Javascript. I am developing a simple site to get my hands on web programming. The web site is simple and structure is like this:

1. A simple ul/li/css based navigation menu
2. Sub pages are loaded in "div" using jQuery, when ever user click appropriate menu item.
3. Some of the sub-pages are using different jQuery based plugins such as LightWindow, jTip etc.

The jQuery function that loads the sub-page is like this:

function loadContent(htmlfile){
    jQuery("#content").load(htmlfile);
};

The menu items fires loadContent method like this:

<li><a href="javascript:void(0)" onclick="loadContent('overview.html');return false">overview</a></li>

This loads a sub-page name "overview.html" inside the "div".

That's it.

Now this is working fine but some of the sub-pages using jQuery based plugins are not working well when loaded inside the "div". If you load them individually in the browser they are working fine.

Based on above I have few qustions:

1. Most of the plugins are based on jQuery and sub-pages are loaded inside the "index.html" using "loadContent" function. Do I have to call

   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

   on each and every sub-page?

2. If a page is using a custom jQuery plugin, then where do I call it? In "index.html" or on the page where I am using it?

3. I think what ever script you will call in "index.html", you don't to have call them again in any of the sub pages you are using. Am I right here?

Thanks

Prashant

Answer 1

Typically, for plugins, you will need to re-init them after you programmatically replace the part of the DOM on which they have been applied, e.g.:

function loadContent(htmlfile){
    jQuery("#content").load(htmlfile), function(response) {

        // this gets executed after the response has been inserted into the DOM
        jQuery(response).find("#someElement").fooPlugin();
    });
};

For event handlers, you can simply use live or delegate to ensure that they remain intact after the elements to which they are attached get replaced. The (live) manual says:

Attach a handler to the event for all elements which match the current selector, now or in the future.

Example:

$("a").live("click", function() {
    alert("this will alert even after this anchor has been replaced via ajax");
});

Answer 2

Suppose you are using a plugin named myPlugin. You initialize it inside index.html like this:

jQuery(function() {
    jQuery('#selector').myPlugin();
});

Now as you load content dynamically using .load() and a page that contains #selector is returned, the plugin won't work. The reason for this is simple: the #selector element did not exist when you called .myPlugin(), so the loaded #selector is not affected.

You have to call .myPlugin() again after using .load() to apply the plugin to the new elements:

function loadContent(htmlfile) {
    jQuery('#content').load(htmlfile, function(response) {
        jQuery(response).find('#selector').myPlugin();
    });
}

To specifically answer your questions:

1. No, including jQuery once is enough.

2. You call it in index.html, the loaded content should take any part in loading plugins.

3. You have to initialize plugins every time you load new content.

Answer 3

The call to jquery should be only used one, in the index file.

If you are using jQuery in your sub-pages, on some occassions you have to call it again within that actual sub-page.

Although, a much handier method for your ul menu and subpages would be,

$('ul#menu li a').click(function() {
   var url = $(this).attr('href');
   $('#content').load(url);
});

Sorry if there are any typos there, on my itouch :)

Answer 4

Thanks,

I am using "lightview" on a page name "screenshots.html" which is based on "prototype.js" & "scriptaculous.js". Now these scripts are required only on "screenshots.html", thus I am calling them locally using:

    <script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script>
    <script type='text/javascript' src='js/lightview.js'></script>
    <link rel="stylesheet" type="text/css" href="css/lightview.css" />

If I am loading this page locally in a browser it's working fine but when this page is loaded on the main site using jQuery.load() method, lightview's functionality is gone.

Prashant

Answer 5

If plugin is html page that can be opened standalone in the browser, may be you should use page fragment load

$('#content').load('plugin.html #plugin-body');

not load the whole page (more)

May be I should have predefined function on plugin page called

pluginInitialize(initParams);

function is called from loader page when plugin is loaded. This function contains plugin initialization logic (may be sophisticated and rather complex).

Answer 6

All my sub-pages are similar to this one: This is screenshot.html. Working fine when I load locally in a browser but not working when loaded using jQuery's load() function inside "index.html"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
        <script type='text/javascript' src='js/prototype.js'></script>
        <script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script>
        <script type='text/javascript' src='js/lightview.js'></script>
        <link rel="stylesheet" type="text/css" href="css/lightview.css" />
    </head>

    <body>
        <h3 style="text-align:left;">Screenshots</h3>

        <div align="center">
            <a class="lightview" href="images/ss_win1.png" title="Title"><img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/></a>
            <a class="lightview" href="images/ss_win2.png" title="Title"><img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/></a>
            <a class="lightview" href="images/ss_win3.png" title="Title"><img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/></a>
        </div>
    </body>
</html>