Want to display a waiting screen while query is been proccessed

Discussion in 'JavaScript' started by kailashr2k, Jun 9, 2008.

  1. #1
    I have and search table and an submit button after selecting the range and wen i click button it take time to process the query so i need to display an waiting screen. I want some code example to do this please anyone help in finding this.
    Am using ajax and jquery for this..
     
    kailashr2k, Jun 9, 2008 IP
  2. xlcho

    xlcho Guest

    Messages:
    532
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here's the simpliest, yet pretty good way to do this. Place an element like this one:
    <div id='waitingMsg' style='position: aboslute; left: 50%; top: 50%; width: 200px; height: 100px; margin-left: -100px; margin-top: -50px; display: none'>Please wait...</div>
    Code (markup):
    somewhere in the code. When sending the ajax query(before using send() to send the request), execute the fallowing code:
    document.getElementById('waitingMsg').style.display = 'inline';
    Code (markup):
    to show the message box. When the readystate is has reached 4, and you've processed the data, execute the fallowing:
    document.getElementById('waitingMsg').style.display = 'none';
    Code (markup):
    to hide the waiting message.
     
    xlcho, Jun 9, 2008 IP
  3. kailashr2k

    kailashr2k Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have some code like this..

    <html>
    <head>
    <title>Base page for content</title>
    <script src="jquery.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="contentLoading" class="contentLoading">
    <img src="VideoLoading.gif" alt="Loading data, please wait...">
    </div>
    <div id="contentArea">
    </div>

    <script type="text/javascript">

    jQuery(function($) {
    $("#contentArea").load("air.php");
    });

    $().ajaxSend(function(r,s){
    $("#contentLoading").show();
    });

    $().ajaxStop(function(r,s){
    $("#contentLoading").fadeOut("fast");
    });

    </script>
    </body>
    </html>


    this will work for page load .. How can i convert the same to database loading...

    Please help me..
     
    kailashr2k, Jun 9, 2008 IP
  4. kailashr2k

    kailashr2k Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Please any one help me in finding out this one...I am hardly in need of it...
     
    kailashr2k, Jun 9, 2008 IP