[AJAX] [Scriptaculous] Ajax Scriptaculous - Affichage alternatif de texte

**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

[AJAX] [Scriptaculous] Ajax Scriptaculous - Affichage alternatif de texte

JavaScript

Discussions similaires

Partager

Partager