[Scriptaculous] Ajax Scriptaculous - Affichage alternatif de texte [Résolu]

oneTime · 22/02/2008, 23h41

Bonsoir,
je suis débutant en AJAX et j'utilise scriptaculous en combiné.
Je souhaite un affichage alternatif de texte comme sur le site d'Apple - partie "quoi de neuf".

Voici ce que j'ai fait... J'ai pensé à utiliser AjaxPeriodicalUpdater pour cela, combiné à un effet sympa de scriptaculous et mon problème c'est que rien ne s'affiche dans mon div contenu-references, quoi que je fasse

Même en plaçant un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert("test");

à la première ligne de la définition de la fonction javascript maj_ref().

Pourquoi ? Qu'est-ce qui ne va pas dans mon code ?
Merci d'avance !

index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>Document sans titre</title>
 
<script type="text/javascript" src="js/fonctions.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
 
<script type="text/javascript">
 
var position = 0;
 
function maj_ref() {
 
 var ref = $('contenu-references');
 
 url = 'refs.php';
 o_options = new Object();
 o_options = {
		method:'get',
		parameters ='id='+position,
		frequency:5, 
		onSuccess= function() {
						ref.innerHTML = responseText;
					        new Effect.Appear('contenu-references',1);
						position++;
					      } 
		};
 
var requete = new Ajax.PeriodicalUpdater(ref,url,o_options);
 
}
</script>
</head>
 
<body onLoad="maj_ref()">
 
	<div id="contenu-references" style="display:none; color:#000000">&nbsp;</div>
 
</body>
</html>

refs.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?php 
 
$references = array (1 => "ref 1",
			2 => "ref 2",
			3 => "ref 3");
 
echo $references[$_GET["ref"]];
 
 
 ?>

Kerod · 23/02/2008, 09h28

Personnellement moi j'utilise la fonction Updater :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function getContent(ident){
  new Ajax.Updater('realisation', './ajax/ajaxGetRealisation.php', {method:'post', parameters:{'idreal':ident}, onSuccess: succesFunc}); 
}

Sinon, quelle erreur as-tu ? Si tu ne le sais pas je te conseille fortement d'installer l'extension Firebug qui te permettra d'analyser la requête ainsi que sa réponse : http://xhtml.developpez.com/outils/?...lugins#firebug

As-tu vraiment besoin du periodical ? ca va réactualiser ton contenu constamment et donc certainement faire ramer le PC des visiteurs. Surtout que tu charges déjà tout le contenu de scriptaculous.js

Pour plus d'infos sur cette fonction et un exemple qui fonctionne : http://prototype.js.le-developpeur-web.com/Ajax.PeriodicalUpdater.CONSTRUCTOR().php

oneTime · 23/02/2008, 13h59

Merci d'avoir pris la peine de répondre.

En ce qui concerne le ralentissement des PC des visiteurs, je suis d'accord. Mais quelqu'un peut-il me suggérer un autre fonctionnement peut-être ? Un plus économe en ressources par exemple et qui permet de changer du texte toutes les X secondes...

Merci !

Kerod · 23/02/2008, 19h54

Est-ce nécessaire de rafraichir toutes les X sec ?

Si oui alors j'ai rien à dire.

Par contre concernant le chargement je te propose de le faire qu'avec les fichiers dont tu as besoin, car scriptaculous à lui tout seul est super lourd. Il doit charger draganddrop.js et cie. Il vaut mieux faire une sélection, ça rendra plus rapide le chargement.

Sinon ça fonctionne ton code ?

oneTime · 24/02/2008, 16h21

Désolé, léger retard

Alors oui, il est nécessaire de rafraichir toutes les X secondes pour obtenir cet effet d'apparition/disparition du texte (je ne vois pas comment faire autrement d'ailleurs...).

Mon code marche : je l'ai cependant remanié.

- Utilisation de Ajax.Updater dans ma fonction javascript maj_ref().
- Utilisation d'une fonction cache().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function cache() {
	new Effect.Fade('contenu-references',{duration:2});
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
var position = 0;
 
function maj_ref() {
 
    if (position+1 <= 3) position++;
    else position = 1;
 
    url = 'refs.php';
    o_options = new Object();
    o_options = {
			method:'get',
			parameters:'id='+position,
			onSuccess: function(xhr) {	
 
                            document.getElementById('contenu-references').innerHTML = xhr.responseText;
                           new Effect.Appear('contenu-references',2);
			                                   }
		     };
 
    var requete = new Ajax.Updater(document.getElementById('contenu-references'),url,o_options);
	setTimeout("cache()",4000);
	setTimeout("maj_ref()",6000);
}

Le code PHP n'a pas changé...
Voilà, si tout ça peut aider quelqu'un, sait-on jamais

Kerod · 24/02/2008, 17h19

Il y a certaines choses qui me gênent, désolé.

Le but de la fonction Updater est de mettre à jour l'élément que tu lui définis alors que la tu redéfinis tout. Et dans ce cas, je vois pas l'utilité de cette fonction. C'est pourquoi je ferai bien ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var position = 0;
 
function maj_ref() {
 
    if (position+1 <= 3) position++;
    else position = 1;
   
    url = 'refs.php';
    o_options = new Object();
    o_options = {
            method:'get',
            parameters:'id='+position,
            onSuccess: function() {    
 
                            new Effect.Appear('contenu-references', 2);
                                               }
             };
                
    var requete = new Ajax.Updater('contenu-references', url, o_options);
    setTimeout("cache()",4000);
    setTimeout("maj_ref()",6000);
}

Pour rajouter une couche, avec cette fonction tu n'as pas besoin de onSuccess.

En gros il faut que tu fasses bien la différence entre :

L'objet Request
L'objet Updater
et pourquoi pas L'objet PeriodicalUpdater

oneTime · 24/02/2008, 18h23

C'est vrai, tu as tout à fait raison.
Merci, je vais suivre ton conseil et retoucher mon script

23/02/2008, 13h59	#3
oneTime Nouveau Membre du Club Inscription : décembre 2006 Messages : 102 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 102 Points : 28 Points : 28	Merci d'avoir pris la peine de répondre. En ce qui concerne le ralentissement des PC des visiteurs, je suis d'accord. Mais quelqu'un peut-il me suggérer un autre fonctionnement peut-être ? Un plus économe en ressources par exemple et qui permet de changer du texte toutes les X secondes... Merci !
	00

23/02/2008, 19h54	#4
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Est-ce nécessaire de rafraichir toutes les X sec ? Si oui alors j'ai rien à dire. Par contre concernant le chargement je te propose de le faire qu'avec les fichiers dont tu as besoin, car scriptaculous à lui tout seul est super lourd. Il doit charger draganddrop.js et cie. Il vaut mieux faire une sélection, ça rendra plus rapide le chargement. Sinon ça fonctionne ton code ?
	00

24/02/2008, 18h23	#7
oneTime Nouveau Membre du Club Inscription : décembre 2006 Messages : 102 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 102 Points : 28 Points : 28	C'est vrai, tu as tout à fait raison. Merci, je vais suivre ton conseil et retoucher mon script
	00

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