Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post

    jQuery .load() problum

    Hello Firends .
    i am creating a website where user can move any where in the website without reloading the window .

    i have created a simple logic and its working fine but only once .
    assume that you are visiting the main page you have clicked on a product from list of products . the scripts will load the product page successfuly without reload . but after that when you click on any link in newly loaded page the gets reload.

    here is my written code .

    Code:
    <script type="text/javascript">
     jQuery(function(){
    
    $("a").bind('click',function(){
    	
    	var link = $(this).attr("href");
    	
    	$("#main").load(link+" #main");
    	
    	});	
    });
    </script>
    Last edited by Azeem Hassni; 09-21-2013 at 08:59 AM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try this
    Code:
    <script type="text/javascript">
     jQuery(function(){
    
    $("a").on('click',function(){
    	
    	var link = $(this).attr("href");
    	
    	$("#main").load(link+" #main");
    	
    	});	
    });
    </script>

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by DanInMa View Post
    try this
    Code:
    <script type="text/javascript">
     jQuery(function(){
    
    $("a").on('click',function(){
    	
    	var link = $(this).attr("href");
    	
    	$("#main").load(link+" #main");
    	
    	});	
    });
    </script>
    That is the recommended way to bind event handlers starting jQuery 1.7. But the main solution to the problem is to return false in the click handler to prevent the default behavior of anchor links.

    Code:
    jQuery(function () {
    
        $("a").on('click', function (e) {
    
            var link = $(this).attr("href");
    
            $("#main").load(link + " #main");
    
            return false;
    
        });
    });
    Or you can also do e.preventDefault();

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ya got me ther, sometimes I forget to add it in my examples, but I typically use preventDefault()

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post
    thanks for the replay but i am using preventDefault() alrady ... i forgot to add this in my example code ...

    any solution ?

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post
    i have tried your example using .on("click"..... instead of .bind("click"......
    but it made no changes in my problum


    sorry for weak english ....

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    328
    Thanks
    9
    Thanked 49 Times in 48 Posts
    A delegated event ?
    I guess you could still use .on() for that:
    PHP Code:
    <script type="text/javascript">
    jQuery(function(){
      $(
    '#page').on('click''a', function(ev){
        
    ev.preventDefault();
        var 
    link = $(this).attr('href');
        $(
    '#main').load(link+' #main');
      });    
    });
    </script> 
    Need a bit of HTML restructuring though to:
    PHP Code:
    <div id="page">
      <
    a href="product1.html">...</a>
      <
    a href="product2.html">...</a>
      ...
      <
    div id="main">...</div>
      ...
    </
    div
    Perhaps...

  • Users who have thanked hdewantara for this post:

    Azeem Hassni (09-21-2013)

  • #8
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post
    hdewantara thanks for the reply .

    all the links outside of #main are working properly . but i have much link inside of #main .
    when i click a link inside of #main it works without reload only once ..

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    that's odd, it sounds like .on() isnt catching the new anchors in the dom. You may have to rebind in the callback of .load, but I cannot explain why, on() works pretty reliably for myself.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You should use delegated event as hdewantara said. Maybe you didn't fully follow his/her suggestion?

    Here's a simpler solution without changing your markup:

    PHP Code:
    $(document).on('click''a', function(ev){
        
    ev.preventDefault();
        var 
    link = $(this).attr('href');
        $(
    '#main').load(link+' #main'); //what's the +' #main' for??
      
    }); 

  • Users who have thanked glenngv for this post:

    Azeem Hassni (09-21-2013)

  • #11
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post
    thanks all of you ... its working . now ..

  • #12
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by glenngv View Post
    You should use delegated event as hdewantara said. Maybe you didn't fully follow his/her suggestion?

    Here's a simpler solution without changing your markup:

    PHP Code:
    $(document).on('click''a', function(ev){
        
    ev.preventDefault();
        var 
    link = $(this).attr('href');
        $(
    '#main').load(link+' #main'); //what's the +' #main' for??
      
    }); 
    the #main is used to fetch just the html from #main on the target document. It only works with .load and an ID


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •