loading div using jquery.load()

Question

I have created a web page and using load() function to load the pages on fixed div . But on clicking continuously on different link...the whole web page stops responding .

here is my code for loading page:

$( document ).ready( function() {  

        $('a').bind('click' , function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#part1' ).load( $( this ).attr( 'href' ) );
        });
    });

I also want to change url when i click on the link for the above load() function .

You either did not copy the complete code or you are missing a final closing `});` to close the "ready function" (the current code only closes the "click function"). — Oldskool, Aug 07 '12 at 12:16

VDP · Accepted Answer · 2012-08-08T07:00:09.150

0

by continuously clicking you are adding a bunch of assync requests running in the back. They all need to be handled. So the browser is adding its content to #part1 and rendering it every time a request comes back. That could be a reason why the page isn't responding.

Edit

You can show an indicator to let the users know he's doing something and prevent performing a load again. Following example shows the prevent performing load while loading part.

$( document ).ready( function() {  
    var isLoading = false;

    $('a').bind('click' , function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link
        if(!isLoading){
           //start loading
           isLoading = true;
           $( '#part1' ).load( $( this ).attr( 'href' ), function(response, status, xhr) {
               //this is the callback method for success or failure
               //stop loading
               isLoading = false; 
           });
        }
    });
});

The showing/hiding of an indicator shouldn't be that hard to add. Show when start loading, hide when stop loading.

edited Aug 08 '12 at 07:00

answered Aug 07 '12 at 11:21

VDP

6,340
4
31
53

is there any alternative to this methos..load() – behinddwalls Aug 09 '12 at 13:33
Load is a shorthand. You could just use a normal [$ajax](http://api.jquery.com/jQuery.ajax/) call where you set your url, and have a success-callback where you fill your `$( '#part1' )` and handle the stop loading. But basically it does the same. Another one is [$.get](http://api.jquery.com/jQuery.get/). But in your case I guess the load isn't such a bad choice.. Why do you want something else? Isn't it working like you want? – VDP Aug 09 '12 at 15:19
i am having a page ...and i want all the content should load w/o refreshing...but as no. of clicks increases then...it stops responding and takes to much time to respond...and other thing i want to change the url so that user feels it is navigating..like in google+ – behinddwalls Aug 10 '12 at 09:36
If it's getting slower you probably are keeping stuff that you shouldn't keep. Like duplicate or obsolete event handlers/redrawing logic or some other messy code. It's hard to tell without more code... The url part is [easyer](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – VDP Aug 10 '12 at 14:21

loading div using jquery.load()

1 Answers1