[Scriptaculous] Mise a jour dynamique d'un Slider / Ajax.request [Résolu]

escri · 17/07/2008, 13h16

Bonjour a tous,

Je souhaite mettre a jour periodiquement la valeur d'un slider scriptaculous en lisant la donnee dans un fichier php que j'execute periodiquement.

J'ai pour l'instant simplifie mon fichier php a l'extreme (essai.php):

Citation:

<?php
header('Content-Type: text/html; charset=UTF-8');
echo "1"; ?>

Puis je lance mon fichier :

Citation:

<?php
include '../utils/db.php';

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="../utils/lib/prototype.js"></script>
<script type="text/javascript" src="../utils/src/scriptaculous.js"></script>
</head>
<body>

<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
</div>

<p id="debug2"> </p>

<script type="text/javascript">

var slider = new Control.Slider('handle2','track2',{axis:'vertical', values:[4,3,2,1,0],range:$R(4,0),
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});

function gestionReponse(xhr)
{
var i=xhr.responseText;

}

function recupValeur(){
var xhr=new Ajax.Request("essai.php",
{
method:"get";
onComplete:gestionReponse();
}
);
}

function updateSlide(){
recupValeur();
slider.setValue(i);
}

new PeriodicalExecuter(updateSlide,2);

</script>

</body>
</html>

Le slider marche bien tout seul, sans recuperer la valeur dans le php. Je n'arrive pas a savoir ce qui ne marche pas...
Merci de votre aide,

Audrey

escri · 18/07/2008, 05h45

Bon, a force de lire des tutos differents, je m'en suis finalement sortie.
Je pense que je faisais de grossieres erreurs. Voici ma version qui marche.

fichier php

Citation:

<?php header('Content-Type: text/xml');

echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
echo "<donnee>3</donnee>\n";
echo "</exemple>\n"; ?>

Appels Ajax

Citation:

<?php
include '../utils/db.php';

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="../utils/lib/prototype.js"></script>
<script type="text/javascript" src="../utils/src/scriptaculous.js"></script>
</head>
<body>

<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
</div>

<p id="debug2"> </p>

<script type="text/javascript">

var slider = new Control.Slider('handle2','track2',{axis:'vertical', values:[4,3,2,1,0],range:$R(4,0),
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});

function ajax()
{
var xhr=null;

if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { alert_ajax(xhr); };

//on appelle le fichier reponse.txt
xhr.open("GET", "./essai.php", true);
xhr.send(null);
}

function alert_ajax(xhr)
{
var docXML= xhr.responseXML;
var items = docXML.getElementsByTagName("donnee")
//on fait juste une boucle sur chaque élément "donnee" trouvé
i=0
var etage = items.item(i).firstChild.data;
slider.setValue(etage);

}

new PeriodicalExecuter(ajax,2);

</script>

</body>
</html>

Si celq peut servir a quelqu'un...

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email