Link to home
Create AccountLog in
Avatar of EMB01
EMB01Flag for United States of America

asked on

jQuery Display While Loading PHP Script

I have a PHP page that takes a long time to load due to it's many database queries.  I looked at jQuery loading plugins, but can someone give me an example how to use one in this instance?
Avatar of mydropz
mydropz

if you have a wrapper around the content that needs to be shown you can do the following.

in the css hide the wrapper
#wrapper{display:none}

Open in new window


now place a div with a loader image outside the wrapper and use css to position it make sure to use
 #loader{display:block}

Open in new window


now in your head add the following code
 <script type="text/javascript">$(document).ready(function(){$('#loader').hide();$('#wrapper').show();});</script>

Open in new window


this should do the trick
Avatar of EMB01

ASKER

The page still takes a long time to load and doesn't yet display the loading message.  Here's the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> 
<head> 	
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 	
<title>Questionnaire</title> 	
<meta name="Author" content="author" />	
<meta name="Description" content="desc" />	
<meta name="Copyright" content="copyright" />	
<meta name="Robots" content="robots" />	
<meta name="Generator" content="generator" />	
<meta name="Keywords" content="keywords" /> 
<link rel="stylesheet" type="text/css" href="primary.css" />
<script src="../jquery-1.4.4.min.js" type="text/javascript"></script>
<style type="text/css">
#wrapper{display:none}
#loader{display:block}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#loader').hide();
	$('#wrapper').show();
});
</script>
</head> 
<body>  
<h1>RFI Questionnaire</h1>
</div>
<div id="loader">Loading
</div>
<div id="wrapper">
<div class="body">
<!-- THIS IS WHERE ALL THE BIG SCRIPTS GET PROCESSED -->
</table>
</div>
</div>
</body> 
</html>

Open in new window

jQuery will not help much, because it waits until the page finishes loading to run its tasks.

My suggestion: split your processing in two pages. The first one will send only that HTML from your comment. The second one will do the processing and return only the HTML for the ".body" div. Then, put this in your first page:

<script type="text/javascript">
  $(function ()) {
    $.post("second.php", { param1: "<?php echo $p1; ?>", param2: ... },
      function(data) {
        $(".body").html(data);
      }
    }
  }
</script>

Open in new window

Avatar of EMB01

ASKER

The script doesn't process POST data, it just runs database queries.  How must the code be altered since POST is not used.
use $.get("second.php", function(data)...) instead
Avatar of EMB01

ASKER

The page still doesn't display any loading message.  I put all the body code into second.php and my main code is attached.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"> 
<head> 	
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 	
<title>Questionnaire</title> 	
<meta name="Author" content="author" />	
<meta name="Description" content="desc" />	
<meta name="Copyright" content="copyright" />	
<meta name="Robots" content="robots" />	
<meta name="Generator" content="generator" />	
<meta name="Keywords" content="keywords" /> 
<link rel="stylesheet" type="text/css" href="primary.css" />
<script src="../jquery-1.4.4.min.js" type="text/javascript"></script>
<style type="text/css">
#wrapper{display:none}
#loader{display:block}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#loader').hide();
	$('#wrapper').show();
});
</script>
<script type="text/javascript">
  $(function ()) {
    $.post("second.php", 
      function(data) {
        $(".body").html(data);
      }
    }
  }
</script>
</head> 
<body>  
<h1>RFI Questionnaire</h1>
</div>
<div id="loader">Loading
</div>
<div id="wrapper">
<div class="body">
<!-- THIS IS WHERE ALL THE BIG SCRIPTS GET PROCESSED -->
</table>
</div>
</div>
</body> 
</html>

Open in new window

$(document).ready runs after loading the HTML. That's why "loading" does not show. Remove the first javascript block and change the second to:

<script type="text/javascript">
  $(function ()) {
    $.post("second.php", 
      function(data) {
        $(".body").html(data);
	$('#loader').hide();
	$('#wrapper').show();
      }
    }
  }
</script>

Open in new window

Avatar of EMB01

ASKER

Now, it just sticks on "Loading."  In other words, it only shows the #loader div and never shows #wrapper.
Are you sending all HTML in "second.php" or only the contents of the div?

If you send this, it will work:
<span>Text</span>

Open in new window


But, if you send this, it will NOT work:
<html><head></head><body><span>Text</span></body></html>

Open in new window

Avatar of EMB01

ASKER

No, I'm just sending the <table><?php // bunch of php code ?></table> contents from the second.php page.  To clarify, the problem is that the loader is shown and never goes away and the wrapper is never shown at all.
What if you change the $.post call with a $.get one?
Avatar of EMB01

ASKER

No, that doesn't work either.
ASKER CERTIFIED SOLUTION
Avatar of eduardocosta
eduardocosta

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of EMB01

ASKER

I didn't use yours, I found another one on the web that works fantastically.  I assume yours works with the fix you've noted in your most recent comment.  Thanks for your help.