Ask questions and get good answers on mb.jQuery.components

Question

Hello All,
I wrote a Jquery using .load method to load the body of a .htm (say home.htm) file inside a div element (say 'div#content').

the problem is that when i click a url in the loaded home.htm body, so that it clears the the content of div#content and place the new clicked url body inside the div#content element, it does not work. The browser performs its normal operation of redirecting you to the newly clicked url instead of loading the body in div#content.

Please find below the 3 .htm code to undestand what i am saying.

first.htm
===========

<html> <head>
          <script.... src="jquery.js"> </script> //reference to Jquery file
          <script language="......>
                 $(function(){
                        $('a').click(function(){   
                               var url= $(this).attr("href"); // get the href value
                   $('div#content').empty();

$('div#content').load(url, function(){
                    $(this).hide().slideDown(400);
                   })
                       return false;
                         });

});
          </script> 
</head> <body>  <div id="content" style='border:1px solid grey'> 
              click <a href='second.htm'> here</a>   <div> 
</body></html>

second.htm
============ 
<html> <head></head> <body>To go <a href="home.htm">home</a> </body> </html>

home.htm 
=============   
<html> <head></head> <body>You are welcome home</body> </html>

when you run first.htm, click the the 'here' url. Second.htm opens inside first.htm, but when you click the new url 'home' it does not open in first.htm.

Please i need your urgent help i have working of a project.

Regards,

Emmanuel

Answer 1

Well, as I can understand your problem is that tha A tag called via Ajax doesn't work as you want... That happens because the first function you call in the page doesn't initialize the A called via ajax in a second time; there are two way to let the A works:

reinitialize them inside the ajax page as you do in the main page;
using jquery 1.3.2 ther's a method call "live" that binds a handler to an event (like click) for all current - and future - matched element.

In the second case your function in the main page shoul be:

 $(function(){
    $('a').live("click",function(){
      var url= $(this).attr("href"); // get the href value
      $('div#content').empty();
      $('div#content').load(url, function(){
        $(this).hide().slideDown(400);
      });
    return false;
    });
  });

Ask questions and get good answers on mb.jQuery.components

problem with ajax .load() and <a href>

Follow this question

pupunzi.com

pupunzi's blog

Other products:

Related questions