JeuWeb Créez votre jeu par navigateur !

Alchern · 21-05-2007, 02:37 PM

Bonjour,
j'ai lu le très bon tutoriel de Kevin sur l'utilisation de Javascript (ou ajax) pour gérer l'augmentation en temps réel des ressources, sans avoir à recharger la page. J'ai bien réussi a l'appliquer à mon projet, toutefois, ce script ne marche que pour une seule ressources.

Imaginons qu'on veuille afficher la variation de la quantité de la ressource pétrole , pour reprendre son exemple, mais aussi, en même temps, la variation de son prix (exemple stupide je sais, mais c'est juste pour illustrer). Après m'être documenté un peu pour le xmlhttprequest, je crois comprendre qu'elle renvoit en fait une chaine de caractéres ou un xml. Or dans notre cas, je voudrais qu'elle renvoit une chaine de caractère mais contenant 2 informations (quantité de pétrole, prix) et ceci en l'affichant dans 2 balises différentes (2 champs d'un tableau par exemple). Et c'est là, que je sèche. J'ai essayé d'executer par le script java, 2 fichiers php chacun renvoyant une information, mais ça n'a pas marché. Je pense à une autre solution, c'est d'exécuter 2 scripts js chacun faisant appel à un fichier php qui renvoit chacun une valeur, mais ça peut être lourd, je pense.

Donc, je voudrais savoir si quelqu'un a une idée pour qu'un script JS renvoit 2 données chacun dans une balise html différente.

Merci pour vos réponses.

Nessper · 21-05-2007, 02:56 PM

Si tu passe une variable de plus à ton script ça marche pas ?

Roworll · (Modification du message : 21-05-2007, 03:29 PM par Roworll.)

Lorsque je souhaite mettre à jours plusieurs champs suite à l'éxécution d'un appel Ajax, je passe par JS et Eval().
Par exemple, je renvoie la chaine

Code PHP :
<?php 

<script language="javascript" type="text/javascript">

document.getElementById('zone1').innerHTML=valeur1;

document.getElementById('zone2').innerHTML=valeur2;

</script> 

Alchern · 21-05-2007, 05:36 PM

Roworll, le souci c'est que ton code d'applique à la récupération de données qui sont dans des champs html or je voudrais récuperer 2 sorties de mysql, c'est à dire, 2 echos envoyés par un fichier php.

Roworll · (Modification du message : 22-05-2007, 07:38 AM par Roworll.)

Heu oui... Ca ne pose aucun problème.
L'exemple que j'ai donné est hyper basique mais peut se décliner pour s'adapter à ton soucis.
Je développe un peu.

Voici un bout de code qui pourrait correspondre au fichier PHP appelé par Ajax

Code PHP :
<?

//Connexion à la DB

...

//Récupération des infos

$rsPetrole=mysql_query(.....);

$rsArgent=mysql_query(.....);

$lnPetrole=mysql_fetch_assoc($rsPetrole);

$lnArgent=mysql_fetch_assoc($rsArgent);

echo "document.getElementById('zone1').innerHTML=".$lnPetrole['quantite'];

echo "document.getElementById('zone2').innerHTML=".$lnArgent['quantite'];

?>

Alchern · (Modification du message : 22-05-2007, 12:13 PM par Alchern.)

Hum, ça ne semble pas fonctionner. Pour faciliter, je mets le code, je me suis peut être trompé quelque part (je ne maitrise pas encore le javascript)

donc le fichier html basique censé afficher l'évolution des ressources avec 2 balises div:

Code :
<!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=iso-8859-1" />

<title>Augmentation des ressources sans actualiser</title>

<script type="text/javascript" src="ajax.js">

eval(xhr_object.responseText);

</script>

</head>

<body onload="window.setTimeout('resRequest()',5000)">

<div id="resId1">

</div>

<div id="resId2">

</div>

<br />

</body>

</html>

Là, je ne pense pas qu'il y ait de souci

Ensuite le fichier php:

Code PHP :
<?php

mysql_connect('localhost', 'root', ''); // On se connecter à la BDD

mysql_select_db('test'); // On sélectionne la BDD ressources

$res1 = mysql_query('SELECT * FROM `ressources` WHERE name="petrole"'); // On fait une requete du pétrole

$rows1 = mysql_fetch_array($res1); // On fait un array de la requete

$newvaleur = $rows1['valeur'] + 10; 

$newcout = $rows1['cout'] + 10; 

mysql_query('UPDATE ressources SET valeur="'.$newvaleur.'", cout="'.$newcout."' WHERE name="petrole"'); 

echo "document.getElementById('resId1').innerHTML=".$newvaleur['quantite'];

echo "document.getElementById('resId2').innerHTML=".$newpetrole['quantite'];

?>

Roworll · 22-05-2007, 12:39 PM

En effet, il y a un soucis.
Le Eval doit remplacer la partie de la fonction existant dans le onReadyStateChange.

Je reprends ton exemple.

Pour la partie HTML

Code PHP :
<?php 

<!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=iso-8859-1" />

<title>Augmentation des ressources sans actualiser</title>

<script type="text/javascript" src="ajax.js">

//Le eval ici ne sert à rien tu peux le virer

//eval(xhr_object.responseText);

</script>

</head>

<body onload="window.setTimeout('resRequest()',5000)">

<div id="resId1">

</div>

<div id="resId2">

</div>

<br />

</body>

</html>

Alchern · (Modification du message : 22-05-2007, 01:45 PM par Alchern.)

Merci pour ton code, c'est déjà plus clair dans ma tête mais ça ne marche toujours pas. Il y avait un petit bug dans le fichier php au niveau des guillemets mais j'ai corrigé. Mais ça ne marche toujours pas. Je me demande si ça ne vient pas d'une mauvaise gestion de l'affichage dans les id. D'ailleurs, je viens de lire qu'on peut mettre qu'un seul attribut id par page html, or là, j'en ai mis 2. Est- ce que je peux remplacer id par class?

Après test, avec un seul id et un seul echo qui renvoit dans cet id, ça ne semble par marcher non plus.

Roworll · (Modification du message : 22-05-2007, 03:28 PM par Roworll.)

Alors un truc utile pour débuguer de l'Ajax :
Utiliser la fonction Alert sur le responseText.
Si je reprends la fonction onReadyStateChange

Code PHP :
<?php 

xhr_object.onreadystatechange = function() { // Si le readyState change alors on execute ce qui est en bas

   if(xhr_object.readyState == 4 && xhr_object.status == 200)

    {

      //on regarde ce que la fonction a renvoyé

      //Si il y a des erreurs PHP, elle apparaitront dans le Alert().

      alert(xhr_object.responseText);

      //Execution du code retourné. 

      //ca peut planter si le contenu de xhr_object.responseText est incompréhensible par Javascript

      eval(xhr_object.responseText);

    }

}

Alchern · (Modification du message : 22-05-2007, 02:29 PM par Alchern.)

Apparament, il y a bien un souci quelque part car alert ne fait pas apparaitre de fenêtre contenant les strings. Il doit y avoir un problème de communication entre fichiers.

Edit. Ce problème est résolu (une parenthèse qui trainait....bref)
J'ai donc bien la fenêtre d'erreur qui s'affiche et qui comporte le message :

document.getElementById('resId1').innerHTML=";";
"document.getElementById('resId2').innerHTML=";";
Apparament les variables php ne sont pas passées

Edit bis. l'appel au script php se fait bien, car les tables mysql sont correctement incrémentés.
Donc en fait le seul souci c'est le voyage des echos php vers le html

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Javascript va trop vite pour récup les données AJAX	L'Omniscient	23	6 094	08-02-2017, 06:02 PM Dernier message: niahoo
	[Javascript] Envoyer en GET (via ajax) un tableau de valeurs à PHP	Ter Rowan	11	9 161	24-07-2013, 07:10 PM Dernier message: Xenos
	Javascript/AJAX : où l'utiliser, où l'éviter ?	Xenos	24	9 513	28-02-2013, 11:01 AM Dernier message: Roworll
	Besoin d'aide pour le choix du language et conseils pour avancer	hercull	17	6 095	17-12-2012, 08:55 PM Dernier message: Xenos
	URL rewriting pour des requêtes Ajax ?	Ter Rowan	5	3 675	28-11-2012, 04:31 AM Dernier message: Akira777