Please help: JQuery preloader with post variables to PHP script. [Archive]

Karrayabe

01-20-2010, 12:04 AM

Hello all, I'm extremely new to JQuery and was trying to get a preloader graphic to display while a php script, handling post values, runs. If anyone could provide assistance it would be greatly appreciated. Below is my code, ugly I know...

Let me know if you require clarification.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/javascripts/jquery1_4.js" type="text/javascript"></script>
<?php
$state_from_signup = $_POST['state'];
$last_name_from_signup = $_POST['last_name'];
$first_name_from_signup = $_POST['first_name'];

echo '
<script>
$(document).ready(function() {
$(\'#preloaddiv\').html(\'<img src="/images/ajax-loader.gif"/><strong>This could take a while...</strong>\')

$.post("search_stores_include/search_for_user.php",

{ state:' . $state_from_signup . ', last_name:' . $last_name_from_signup . ', first_name:' . $first_name_from_signup . ' }, "html");
});

</script>
';

?>

</head>

<body>
<div id="preloaddiv"></div>
</body>
</html>

Thanks again

bdl

01-20-2010, 02:56 AM

So... you're posting values from a form to a PHP script, and then using jQuery to post via ajax to another script? :confused:

What if the user doesn't have JavaScript enabled?

The one glaring error I see is that your JS variables (the $_POST data from PHP) are not wrapped in quotes. You're escaping the string to concatenate the PHP variables to the jQuery.post call, but you're not wrapping those strings.

The best way, IMHO, to include JS in PHP is to use HEREDOC syntax, e.g.

(UNTESTED)

$jscode= <<< END
<script>
$(function(){
$.post('search_stores_include/search_for_user.php',{
state:'$state_from_signup',
last_name:'$last_name_from_signup',
first_name:'$first_name_from_signup'
}, "html");
});
</script>
END;

Be mindful I have not done any critical analysis of your code other than this, and I find it bizarre to begin with. Not being critical, I just don't understand it.

Karrayabe

01-20-2010, 04:20 AM

So... you're posting values from a form to a PHP script, and then using jQuery to post via ajax to another script? :confused:

What if the user doesn't have JavaScript enabled?

The one glaring error I see is that your JS variables (the $_POST data from PHP) are not wrapped in quotes. You're escaping the string to concatenate the PHP variables to the jQuery.post call, but you're not wrapping those strings.

The best way, IMHO, to include JS in PHP is to use HEREDOC syntax, e.g.

(UNTESTED)

$jscode= <<< END
<script>
$(function(){
$.post('search_stores_include/search_for_user.php',{
state:'$state_from_signup',
last_name:'$last_name_from_signup',
first_name:'$first_name_from_signup'
}, "html");
});
</script>
END;

Be mindful I have not done any critical analysis of your code other than this, and I find it bizarre to begin with. Not being critical, I just don't understand it.

Please, do not worry about being critical. I understand this is most likely a stretch considering how little I currently know about javascript and jquery. (I'm much better at php :))

Anyway, I hadn't thought about if they do not have javascript enabled. This is something I will have to address.

Essentially, I already perform validation on a form on a prior script and then redirect to another one which performs an action which takes about 30 seconds. I thought a loading image of some sort would be ideal but, couldn't find a good way to incorporate one outside of JQuery. So for the sake of simplicity I thought I could easily put an in between page which would simple show a div with a loading gif until the other script had finished running. Ideally I could attach to the page where the form is and the validation occurs but, I didn't want to dig too deep (at first for a test) to attach the loading screen on this page.

Hopefully, that clearly shows what I'm trying to achieve.

Thanks for your response!

bdl

01-20-2010, 05:59 AM

Ok so we're basically delaying the user while this 30 second action takes place. What is it that takes 30 seconds, exactly? I'd look at making that process more efficient first.

Another idea, would it be possible to run the long process from an Ajax call before the user gets to that page?

Karrayabe

01-21-2010, 02:28 AM

Actually 30 seconds wasn't entirely accurate. The script performs several screen scrapes based on input information which can take anywhere from 2 seconds to approx 20 depending on what they input and what sites it screen scrapes.

Calling Ajax midway through filling the form out and as they fill in information therefore, leaving any remaining processing for the loading screen but, after a significant head-start would be awesome! I have no idea how to do that though.

Thanks again for your continued attention. I would also be willing to pay to have someone train me on how to perform this actually.

seco

01-21-2010, 02:41 AM

i usually do it like this

dont put the JS in the php like you have it.

my element wherever in the page

loader
<span id="addressLoad" style="display: none;"><img alt="Please Wait" src="images/ajax-loader.gif"/></span>

results
<span id="addressResult" style="display: none;"></span>

the js example
$(document).ready(function() {
$('#addressLoad').hide();
$('#state').blur(function(){
$('#addressLoad').show();
$.post("geo.php", {
address: $('#address').val(),
city: $('#city').val(),
state: $('#state').val()
}, function(response){
$('#addressResult').fadeOut();
setTimeout("finishAjax('addressResult', '"+escape(response)+"')", 400);
});
return false;
});
});

function finishAjax(id, response) {
$('#addressLoad').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax

you should be able to get the jist of it. in the jquery you see

$.post("geo.php", {
address: $('#address').val(),
city: $('#city').val(),
state: $('#state').val()

this is basically posting a page with the 3 values for the form input fields.