jquery page loading when ajax request

Here you will find a  free php scripts, php resources, php tutorials, web resources , jquery

<?php print "welcome to source world-php ajax script"; ?>

WHAT IS JQUERY?

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.

If you want to do some kind of ajax with please wait... overlay div in center of screen than its very easy with JQuery. Example is given bellow.Today most of web pages using ajax request.So whenever ajax request made we have to display please wait like some message to user so that user can wait till a response arrived so here is example how to display overlay div as please wait.. message. 
Jquery ajax please wait overlay div











Here in this example what I have done is with using jquery ajax start and jquery ajax stop method display a overlay div.This overlay div is called whenever ajax request is made.I have mapped screen browser resolution and displayed div as overlay div.This please wait overlay div is tasted in I.E 7,8,Mozilla,Opera 10.





Jquery Code
<script type="text/javascript">
     var $n = jQuery.noConflict(); //prevents jquery conflict
      $n('#loadingDiv') //your loading div
        .hide()  // hide it initially div
        .ajaxStart(function() {  //this function call automatically when ajax request is made(loading is displayed) 
           $n("#msg").hide();
            var heigh=$n(document).height();
            var width=$n(document).width();
            $n(this).height(heigh);
            $n(this).width(width);
            
            $n(this).show();
        })
        .ajaxStop(function() {  //this function call automatically when ajax response received (loading hide)
            $n(this).hide();
     })
       .ajaxError(function(a, b, e) { //error on ajax 
                throw e;
     });
</script>

Download full example

Buy Me a Beer-If you are like this post

 If you does not have paypal account create free account create account

No comments:

Post a Comment