views:

81

answers:

2

I need to dynamically update the contents for every few seconds, without reloading the page, so i thought to use jquery load() function, this loads the contents fine but not the js or jquery file from head tag.

Here is sample code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
        <head>
            <title>{$PAGE_TITLE}</title>
            <link rel="stylesheet" type="text/css" href="../web/css/style.css" />
            <script type="text/javascript" src="../web/js/jquery-1.3.2.min.js" ></script>
            <script type="text/javascript" src="../web/js/wz_tooltip.js"></script>
            <script type="text/javascript" src="../web/js/tip_centerwindow.js"></script>  
            <script type="text/javascript" src="../web/js/tip_balloon.js"></script> 
            <script type="text/javascript">
            {literal}
                $(document).ready(function() {
                   setInterval(function(){
                       $("#content").load("load_contents.php");
                   },20000);
                 ......
                });
            {/literal}
            </script>
        </head>
        <body>
           <div class="content">

           </div>
        </body>
    </html>

Suggest me the solution...

Updated: Tooltip js is not loading, y?...

A: 

I can't find the reference, but any javascript in the page that is loaded will automatically be disabled to prevent conflicts. If you need to do something to the loaded content, I would suggest using either live() or delegate() on the main page to act on the loaded content.

fudgey
can u give me the sample, please........
boss
http://stackoverflow.com/questions/75943/how-do-you-execute-a-dynamically-loaded-javascript-block and if you need an example, it depends on what you are doing to the loaded content.
fudgey
A: 

I agree with fudgey about using live (delegate isn't an option in 1.3.2) if possible. If your plugin doesn't support that though (which I'm guessing it doesn't since it's not working), you can pass a function to .load that will run when the content is loaded. Here you will want to hook up these new elements to your plugin. For example, so for instance say you wanted to use draggable from jQuery UI on all divs inside content , you might do

 $(document).ready(function() {
      var init = function(){
          $("#content div").draggable();
      };
      init();
      setInterval(function(){ 
           $("#content").load("load_contents.php", init)
       },20000);                 
 });

If you do this with your tooltip plugin and whatever else, you are reloading into content, it should work. Be careful to call the init method only on content within #content so you don't end up adding tooltips twice to other areas. Using a plugin that uses delegate (upgrade to latest jQuery) or live will avoid having to do the selection and rebind each time you add elements, making for faster reloads.

Joel