Faire une page wait ajax au submit avant la réponse requete

Medesko
Invité n'ayant pas de compte PHPfrance

23 août 2012, 16:21

Mon besoin est : Lorsqu'un utilisateur clique sur submit pour envoie sa requête , je le ferais pour afficher une page wait.php en ajax loader animer avec le message (Nous recherchons actuellement votre devis). le temps d'attente de mon web service est 30 seconde, lorsque le serveur a terminé, il peut afficher la page resulte.php
Comment puis-je faire?

Thank you to helpe me

Eléphant du PHP | 229 Messages

23 août 2012, 20:20

Bonsoir,
en ajax/ jquery ca donnerai

Pour la page de chargement :
[javascript]<script type="text/javascript" src="jquery.js"><script>
<script type="test/javascript">
function wait(){
$.post(wait.php, processResult);}
ProcessResult(data){
$("#sortie").append(data);}
</script>

<div id="sortie"></div>[/javascript]

Pour la page wait.php :
<?php echo "Nous recherchons actuellement votre devis" ?>
SI j'ai bien compris ta demande.Parceque je comprend pas l'intéret de passer par l'ajax car il n'y a pas de communication avec le serveur. Un simple javascript suffirait a mon sens, car c'est coté client que c'est géré.

Bonne soirée.

ViPHP
xTG
ViPHP | 7331 Messages

23 août 2012, 21:02

SI j'ai bien compris ta demande.Parceque je comprend pas l'intéret de passer par l'ajax car il n'y a pas de communication avec le serveur. Un simple javascript suffirait a mon sens, car c'est coté client que c'est géré.
Pas si le retour du webservice doit être traité via un langage serveur. Ce qui semble être le cas. :)

Eléphanteau du PHP | 21 Messages

24 août 2012, 09:08

Merci !

le retour du serveur est tratite via le php, en gros je consume un web services Soap php, j'ai une page devis.php et une page result.php, la page wait.php allait joue le rôle de chargement avec un gif anime et mon texte d'attente avant résultats du webserices

Tahnk u

Eléphant du PHP | 229 Messages

24 août 2012, 09:34

Le bout de code est suffisant ?

Eléphanteau du PHP | 21 Messages

24 août 2012, 10:28

c'est ma page form.php que je dois ajouter le js ? et comment je fais la redirection de page wait.php vers la page result.php
Thank u

Extrait d mon code :
Form.php
            <form action="result.php" method="POST" id="sendform">
                              label for="height">Hauteur :</label>
                            <input type="text" name="PackageHeight" id="height" value="<?php if(isset($_SESSION['PackageHeight'])){
                                echo $_SESSION['PackageHeight'];} ?>"  class="settings cm" maxlength="3" AUTOCOMPLETE=OFF>
                              <label for="weight">Poids :</label>
                            <input type="text" name="Weight" id="weight" value="<?php if(isset($_SESSION['Weight'])){
                                echo $_SESSION['Weight'];} ?>"  class="settings kg"  maxlength="5" AUTOCOMPLETE=OFF>
                            <input type="submit" value="Valider" id="submit" name="submit" class="submit_send">

           </form>
Result.php

<?php if (isset($_POST['submit'])){
                $the_a_RequestData ['PARCELS'] = array(
                    'Weight' => (float) $_POST["Weight"],
                    'PackageHeight' => (float) $_POST["PackageHeight"]);
                $o_Request = new WSCall('$wsdl');

                 $result = $o_Request->getServiceList($the_a_RequestData);
                var_dump($result);
            }
?>

Eléphant du PHP | 229 Messages

24 août 2012, 13:31

il faut plutot faire sur la page result.php
[javascript]<script type="text/javascript" src="jquery.js"><script>
<script type="test/javascript">
$(init);

function init(){
$.post(wait.php, processResult);}
ProcessResult(data){
$("#sortie").append(data);}
</script>

<div id="sortie"></div>[/javascript]

Et le message va apparaitre dans le div de ta page result.php.

Ou alors tu inclus ton result.php dans la page wait.php et dans ce cas tu mets le code dans form.php (je pense que c'est le mieux).

Donc form.php tu ajoutes mon code AJAX.
et dans result.php tu ajoutes
echo 'message d'attente';
Au début du code. ET au lieu de [javascript]$.post(wait.php, processResult);}[/javascript]
Tu mets [javascript]$.post(result.php, processResult);}[/javascript]

Reste a tester le résultat.

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

24 août 2012, 14:00

Hum,

En fait veux une tite animation pour indiquer d'attendre pendant que la requête Ajax se traite (a priori jusqu'a 30s).
Donc le principe est simple :
- afficher un gif animé qui indique l'attente, le tout au dessus du reste (genre centre modale)
- lorsque l'image est affichée effectuer la requête Ajax.
- traiter le retour de la requête
- afficher résultat
- virer l'image d'attente

Le tout enJS bien entendu (choisis ton framework y a autre chose que JQuery)

@+
Il en faut peu pour être heureux ......

Eléphant du PHP | 229 Messages

24 août 2012, 15:05

Voila j'ai fait une "cascade de fichier php en ajax. Le premier affiche le gif et envoi la requete au second :
le form.php
[javascript]<?php
/*pas mettre de <form></form> dans le formulaire*/?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fnum(){
var num=$("#num").val();
$.post("resultch.php",{"num":num}, processResult);
}
function processResult(data, textStatus){
$("#sortie").append(data);
$("#sortie").append(textStatus);}
</script>
<input type="number" id="num"/>
<input type="submit" onclick="fnum()"/>
<div id="sortie">==></div>
<div id="sortie2">==></div>[/javascript]

le result.php
<?php
$num = $_POST['num'];
echo "<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(init)
function init(){
var num=$('#num').val();
$.post('resultch2.php',{'num':num}, processResult2);
}
function processResult2(data, textStatus){
	$('#sortie2').append(data);
	$('#sortie2').append(textStatus);
}
</script>
<input type='hidden' value='".$num."' id='num'/>";
echo "<img src='chargement1.gif'/> $num";?>
et un 2eme fichier resultbis.php
<?php
sleep(4);
//slep est mis pour simuler la durée d'attente
$num = $_POST['num'];
$num= $num*2;
echo $num;

?>

Eléphanteau du PHP | 21 Messages

27 août 2012, 12:06

Thank you it work good

Eléphant du PHP | 229 Messages

27 août 2012, 18:33

une application utilisant le coe pour illustrer :
un jeu pour ma fille avec les images de slingo, qu'elle adore :)

http://ilovephp.dedicom.eu/gifchargement/index.php
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>I love PHP</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

function w1(){
$.post("waiter.php", processResult);
}

function processResult(data, textStatus){
	$("#bodycount").html(data);

}
</script>

<style>
body{ margin:auto;text-align:center;width:500px;border: 4px black groove; }
h1 {
	border: 4px black groove;background: whitesmoke;
}
</style>
<body>

<h1>Welcome</h1>

<div id="bodycount">

</div>
	
	<input type="submit" value=" Qui est le plus fort ???" onclick="w1()"/>

<h6>By Schim59<br/><img style="width:50px;height:50px;" src="slingo3.png" alt="clown-vert"/></h6>


</body>
</html>

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(init)
function init(){
var num=$('#num').val();
$.post("waiter2.php",processResult2);
}

function processResult2(data, textStatus){
	$("#bodycount").html(data);
}
</script>


<img src='chargement2.gif' style="width:150px;height:150px;"/>
<?php

sleep(1);
$tab=array(
'Papa'=>'Pierre-Marie',
'Maman'=>'Sabrina',
'Enfant1'=>'Sarah',
'Enfant2'=>'Laurine');
$gagnant=$tab[array_rand($tab)];
echo "<h2>".$gagnant."</h2>";

if($gagnant=='Pierre-Marie')
{

	$im='<img src="slingo3.png"/>';
	echo $im;
}

if($gagnant=='Sabrina')
{
	$im='<img src="ange.png"/>';
	echo $im;
}

if($gagnant=='Sarah')
{

	$im='<img src="diablotin.png"/>';
	echo $im;
}

if($gagnant=='Laurine')
{

	$im='<img src="clownr.png"/>';
	echo $im;
}

?>