Home/ Questions/Q 810091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:49:46+00:00

I am not just a newbie with Javascript. I am developing a simple site

  • 0

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 whatever 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?

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">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

    <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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");
});
    • 0