CODEWITHSUNDEEP
javascriptjqueryajax
Abhishek
Abhishek

Reputation: 5728

Two Cases of Ajax loading of Webpage having some contradiction

I am using, Ajax load function in jquery to load another page in DOM. By using this 

$('.upload').on('click',function(){

 $('.content').load('loo.php');

});

When i use this the page in division content loads after a 3-4 second Interval.

I wanted to show progress bar using that interval so i used this way

$('.upload').on('click',function(){

       $.ajax({
           url: 'loo.php',
         beforeSend:function(){

           res.container.append(res.loader); //Showing loader

         },
         success:function(){

            $('.content').load('loo.php');
             res.container.find(res.loader).remove(); //Hiding Loader 

               }

       });

});

So Now what happen is, loader comes and shows for few time and then page in division loads, But the problem is i again see delay in page loading after the loader hides. I created the loader to overcome the time but, still it takes time after the loader goes.

In firebug, by analysing request the page starts loading after the loader , which i don't want. Any idea, how to overcome this problem.

Upvotes: 1

Views: 84

Answers (2)

jbabey
jbabey

Reputation: 46647

load() and ajax() both perform ajax calls, this is probably not what you meant to do. Try this instead:

$('.upload').on('click',function() {
    $.ajax({
        url: 'loo.php',
        beforeSend: function() {
            res.container.append(res.loader); //Showing loader
        },
        success: function(data) {
            // add the content to the DOM instead of loading it again
            $('.content').html(data); 
            res.container.find(res.loader).remove(); //Hiding Loader 
        }
    });
});

Upvotes: 1

Matanya
Matanya

Reputation: 6346

you are removing the "loader" before the AJAX request is finished. you should remove the loader in a callback function, after the load() is finished. Also no need for double AJAX request.

$('.upload').on('click',function(){
   res.container.append(res.loader); //Showing loader
  $('.content').load('loo.php', function(){
             res.container.find(res.loader).remove(); //Hiding Loader 

    });
});

Upvotes: 2

Related Questions