Page 1 sur 1

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

Posté : 23 août 2012, 16:21
par Medesko
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

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 23 août 2012, 20:20
par schim59
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.

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 23 août 2012, 21:02
par xTG
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. :)

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 09:08
par Medesko
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

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 09:34
par schim59
Le bout de code est suffisant ?

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 10:28
par Medesko
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);
            }
?>

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 13:31
par schim59
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.

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 14:00
par moogli
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)

@+

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 24 août 2012, 15:05
par schim59
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;

?>

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 27 août 2012, 12:06
par Medesko
Thank you it work good

Re: Faire une page wait ajax au submit avant la réponse requ

Posté : 27 août 2012, 18:33
par schim59
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;
}

?>