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 .

Answer 1

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.