CODEWITHSUNDEEP
javascriptjqueryajaxloadingshow-hide
AvikB
AvikB

Reputation: 413

show loading text on pjax request

i have a script that uses pjax for loading pages. i want to show a loading "loading..." text while request is making, and show until the page fully loads. when ajax makes a call...

        pjax.connect({
        'container': 'pageContent',
        'beforeSend': function(){console.log("before send");},
        'complete': function(){console.log("done!");}
    });

in the firebug console it sends this messages. so i am thinking maybe, with the beforesend and complete function it is doable. i have poor knowledge on javascript, so maybe some one of you could show me how to do this.

Upvotes: 4

Views: 4482

Answers (2)

user1566994
user1566994

Reputation: 304

You're correct - you can use the 'beforeSend' to show the 'Loading...' message, and the 'complete' event to remove it:

  pjax.connect({
    'container': 'pageContent',
    'beforeSend': function(){ $('#LoadingMSG').show(); },
    'complete': function(){ $('#LoadingMSG').hide();}
  });

This assumes you have an element with ID set to LoadingMSG:

<div id='LoadingMSG'>Loading...</div>

Hope this helps!

Upvotes: 4

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

   <div id='main'>
     <div class='loader' style='display:none'><img src='spin.gif'></div>
     <div class='tabs'>
       <a href='/explore'>Explore</a>
       <a href='/help'>Help</a>
     </div>
   </div>


   $('a').pjax('#main').live('click', function(){
     $(this).showLoader()
   })

Upvotes: 0

Related Questions