Changer le fichier xml dans un script javascript par un lien HTML

Version imprimable

bonjour, désolé pourle titre qui est unpeu long, je ne savais pas vraiment comment appelé ca...

Voici ma requette:

j'ai ce code

Code:

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
<div id="navigation" ondragstart="return false" onselectstart="return true">
		<a href="http://adresse en clair" class="menu">IDENTITE VISUELLE&nbsp;</a>    	
		<a href="http://adresse en clair" class="menu">COMMUNICATION PAPIER&nbsp;</a>    
		<a href="http://adresse en clair" class="menu">ILLUSTRATION</a>
    <div id="slideflow">
      <script type="text/javascript">
                        <!--
                                httpReq = getHttpReq();
 
                                if (httpReq) {
                                        xmlDoc = getXmlDoc(httpReq, "photos.xml");
 
                                        if (xmlDoc) {
                                                photos = xmlDoc.getElementsByTagName("photo");
        
                                                SLIDEFLOW_DATA['containerElement'] = $('slideflow');
                                                
                                                SLIDEFLOW_DATA['images'] = new Array();
                                                                                
                                                for (var i=0; i < photos.length; i++) {
                                                        SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
                                                }
 
                                                slideFlow = new Slideflow(SLIDEFLOW_DATA);
                                                numPhotos = photos.length;
                                        }
                                }
                        //-->
                        </script>

j'aimerai ke le lien html "IDENTITE VISUELLE", "COMMUNICATION PAPIER" et "ILLUSTRATION" puisse faire en sorte que mon script de la div d'en dessous apelle un autre fichier xml. Je voudrais que le contenu du coverflow change en fonction du lien cliqué...

AVez vous une idée de comment faire?
merci à nouveau.

Bonjour,

Tu peux observer le click sur les liens et utiliser leur href pour un appel à ton code que tu auras mis dans une fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var doSomethingWithXmlUri = function(xmlUri) {
httpReq = getHttpReq();
 
if (httpReq) {
  xmlDoc = getXmlDoc(httpReq, xmlUri);
  if (xmlDoc) {
    // ...
  }
}
// fonction qui traite le clique sur un lien
var onMenuLinkClicked = function(e)  {
  // on recupere le href de l'element cliqué
  var href = e.element().readAttribute("href");
  doSomethingWithXmlUri(href);
};
// on observe les elements ayant la classe css menu pour traiter le click
$$(".menu").invoke("observe", "click", onMenuLinkClicked);

23/11/2010, 20h18
ditow

ok, ton message est clair merci beaucoup,
En revanche je ne pense pas que les href de mes liens soient necessaires vu que je ne veux pas changer de page.... je pense que je vais les enlever... je veux juste ke le contenu de la div d'en dessous change sans avoir à recharger la page ou changer de page...

Il faut effectivement stopper l'action par défaut du lien lors du click :

Code:

1
2
3
4
5
6
7
8
 
var onMenuLinkClicked = function(e)  {
  // on stop l'événement pour ne pas partir sur l'url du href
  e.stop();
  // on recupere le href de l'element cliqué
  var href = e.element().readAttribute("href");
  doSomethingWithXmlUri(href);
};

24/11/2010, 23h16
ditow

Bonjour,
Je suis désolé, je suis completement débutant là dedans.... je ne vois pas l'endroit ou j'indique quel fichier xml le script doit allé chercher...
merci
25/11/2010, 09h38
gwyohm

Citation:

Envoyé par ditow

je ne vois pas l'endroit ou j'indique quel fichier xml le script doit allé chercher...

C'est en lisant le href... la différence avec avant c'est qu'on stop le click pour ne pas suivre le lien
27/11/2010, 02h31
ditow

Bonjour,
deux trois choses que je ne comprend pas:

Si on ne suis pas le liens href, a quoi sert-il? qu'est ce que je met comme liens? on s'en fou? je met le nom du fichier xml?
27/11/2010, 11h44
gwyohm

Bonjour,

Dans l'idée oui, on se sert du lien (et du contenu de son href) pour connaitre l'url du fichier XML.
C'est une solution parmi d'autres : l'important est de savoir récupérer l'URL du fichier XML.
27/11/2010, 13h45
ditow

donc dans le lien je met l'url du fichier xml?
01/12/2010, 00h03
ditow

Bonjour, soir

Je suis navré, mais je n'arrive pas à comprendre, utiliser ton code...je voisbien que tu essayes de me dire qqch...^^

Donc voila comment j'ai intégré ton code... voici l'adresse du site pour voir le resultat... ca suis le lien comme si de rien n'était et ca m'ouvre le fichier xml en mode texte...

Code:

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
<div id="navigation" ondragstart="return false" onselectstart="return true">
		<a href="photos.xml" class="menu">IDENTITE VISUELLE&nbsp;</a>    	
		<a href="photos2.xml" class="menu">COMMUNICATION PAPIER&nbsp;</a>    
		<a href="photos3.xml" class="menu">ILLUSTRATION</a>
    <div id="slideflow">
      <script type="text/javascript">
			<!--
				var doSomethingWithXmlUri = function(xmlUri) {
				httpReq = getHttpReq();
 
				if (httpReq) {
	  				xmlDoc = getXmlDoc(httpReq, xmlUri);
 
					if (xmlDoc) {
						photos = xmlDoc.getElementsByTagName("photo");
 
						SLIDEFLOW_DATA['containerElement'] = $('slideflow');
 
						SLIDEFLOW_DATA['images'] = new Array();
 
						for (var i=0; i < photos.length; i++) {
							SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
						}
 
						slideFlow = new Slideflow(SLIDEFLOW_DATA);
						numPhotos = photos.length;
					}
				}
				// fonction qui traite le clique sur un lien
var onMenuLinkClicked = function(e)  {
	// on stop l'événement pour ne pas partir sur l'url du href
  e.stop();
  // on recupere le href de l'element cliqué
  var href = e.element().readAttribute("href");
  doSomethingWithXmlUri(href);
};
// on observe les elements ayant la classe css menu pour traiter le click
$$(".menu").invoke("observe", "click", onMenuLinkClicked);
			//-->
			</script>

04/12/2010, 11h14
gwyohm

Bonjour,

Tu peux donner l'URL ou on peut tester ?

On peut voir la page complète (fait un view source et colle le contenu)
04/12/2010, 14h30
ditow

www.lucilemaiseau.com

Alors après tests,

1/ Tu as d'autres erreurs javascript : '}' manquante
2/ Tu utilises une version obsolète de prototype

Je te conseille donc de corriger ton code source comme suit :

Code:

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
			<!--
				var doSomethingWithXmlUri = function(xmlUri) {
					httpReq = getHttpReq();

					if (httpReq) {
						xmlDoc = getXmlDoc(httpReq, xmlUri);

						if (xmlDoc) {
							photos = xmlDoc.getElementsByTagName("photo");

							SLIDEFLOW_DATA['containerElement'] = $('slideflow');

							SLIDEFLOW_DATA['images'] = new Array();

							for (var i=0; i < photos.length; i++) {
								SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
							}

							slideFlow = new Slideflow(SLIDEFLOW_DATA);
							numPhotos = photos.length;
						}
					}
				}// <-- acolade manquante
				// fonction qui traite le clique sur un lien
var onMenuLinkClicked = function(e)  {
	// on stop l'Ã©vÃ©nement pour ne pas partir sur l'url du href
  e.stop();
  // on recupere le href de l'element cliquÃ©
  var href = e.element().readAttribute("href");
  doSomethingWithXmlUri(href);
};

Par ailleurs, soit tu mets à jour prototype et scriptaculous (les versions actuelles sont prototype 1.7 / scriptaculous 1.8.3

Soit tu modifies le code pour être compatible avec prototype 1.5 (que tu utilises pour le moment) comme suit :

Code:

1
2
3
4
5
6
7
8
9
 
var onMenuLinkClicked = function(e)  {
  Event.stop(e);
  //e.stop();
  // on recupere le href de l'element
  var href = Event.element(e).readAttribute("href");
  // var href = e.element().readAttribute("href");
  doSomethingWithXmlUri(href);
};

04/12/2010, 16h09
ditow

Bonjour,
Donc j'ai essayé de mettre a jour mes biblioteques mais ca faisait tout cracker...
dont je suisrepassé à l'ancienne version et j'ai corriger le codecomme vous l'aviez dit... ça marche :D je vous aime.
merci beaucoup
04/12/2010, 17h36
ditow

Re-Bonjour

Il reste juste un dernier probleme.... a chak nouveau clik, le fichier xml s'ajoute a lautre plutot que de le remplacer... si tu veux allé tester sur le site...
13/12/2010, 10h06
gwyohm

Citation:

Envoyé par ditow

Re-Bonjour

Il reste juste un dernier probleme.... a chak nouveau clik, le fichier xml s'ajoute a lautre plutot que de le remplacer... si tu veux allé tester sur le site...

Pour info, ca ne passe que sous IE (chrome et firefox sont KO)

Pour ton problème, tu peux montrer le code de ce que tu fais avec ton fichier XML (au retour de la fonction AJAX)

ça marche bien sous safari et firefox aussi... enfin j'ai été voir chez des potes... ça marche sous tous... j'ai pas essayer chrome ni IE...

Sinon j'ai pas compris le code que tu voullais que je te montre donc je remet moon code...

Code:

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
46
47
48
<div id="frame">
  <div id="fadeArea">
    <div id="wrapper"><img id="photo" src="images/transparent.gif"/></div>
    <h5 id="title"></br>&nbsp;</h5>
    <h6 id="subtitle">&nbsp;</h6>
  </div></br></br></div></br></br>
  <div id="navigation" ondragstart="return false" onselectstart="return true">
		<a href="photos.xml" class="menu">IDENTITE VISUELLE&nbsp;</a>    	
		<a href="photos3.xml" class="menu">COMMUNICATION PAPIER&nbsp;</a>    
		<a href="photos2.xml" class="menu">ILLUSTRATION</a>
    <div id="slideflow">
<script type="text/javascript">
	<!--
				var doSomethingWithXmlUri = function(xmlUri) {
					httpReq = getHttpReq();
 
					if (httpReq) {
						xmlDoc = getXmlDoc(httpReq, xmlUri);
 
						if (xmlDoc) {
							photos = xmlDoc.getElementsByTagName("photo");
 
							SLIDEFLOW_DATA['containerElement'] = $('slideflow');
 
							SLIDEFLOW_DATA['images'] = new Array();
 
							for (var i=0; i < photos.length; i++) {
								SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
							}
 
							slideFlow = new Slideflow(SLIDEFLOW_DATA);
							numPhotos = photos.length;
						}
					}
				}
				// fonction qui traite le clique sur un lien
				var onMenuLinkClicked = function(e)  {
  				//e.stop();
  				Event.stop(e);
				// on recupere le href de l'element
 				var href = Event.element(e).readAttribute("href");
				// var href = e.element().readAttribute("href");
				doSomethingWithXmlUri(href);
				};
				// on observe les elements ayant la classe css menu pour traiter le click
				$$(".menu").invoke("observe", "click", onMenuLinkClicked);
	//-->
</script>

Essaye en vidant le conteneur avant de reconstruire ton Slideflow :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var doSomethingWithXmlUri = function(xmlUri) {
  httpReq = getHttpReq();

  if (httpReq) {
    xmlDoc = getXmlDoc(httpReq, xmlUri);

    if (xmlDoc) {
      photos = xmlDoc.getElementsByTagName("photo");

      SLIDEFLOW_DATA['containerElement'] = $('slideflow').update("");

      SLIDEFLOW_DATA['images'] = new Array();

      for (var i=0; i < photos.length; i++) {
        SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
      }

      slideFlow = new Slideflow(SLIDEFLOW_DATA);
      numPhotos = photos.length;
    }
  }
}

13/12/2010, 21h22
ditow
Bonjour,
merci mais cela ne fonctionne pas et, j'ai remarqué que dans le code généré, le update n'apparait pas...

sinon j'ai trouver ce bout de code dans un post d'une autre personne :
Code:

1 2 // on enleve tout ce qu'il contient container.childElements().invoke("remove");
ca pourrait m'etreutil non?
14/12/2010, 09h11
gwyohm
Citation:

Envoyé par ditow

Bonjour,
merci mais cela ne fonctionne pas et, j'ai remarqué que dans le code généré, le update n'apparait pas...

8O y'a rien qui te choque dans ce que tu dis ?
Comment peux-tu dire que ca ne marche pas, si le code n'est pas renvoyé ?
Citation:
Envoyé par ditow

sinon j'ai trouver ce bout de code dans un post d'une autre personne :

Code:

1 2 // on enleve tout ce qu'il contient container.childElements().invoke("remove");

ca pourrait m'etreutil non?
Oui, c'est une autre façon de faire mais attention, si tu utilises ce code, la suppression doit être une instruction à part entière :
Code:

1 2 3 4 photos = xmlDoc.getElementsByTagName("photo"); $('slideflow').childElements().invoke("remove"); SLIDEFLOW_DATA['containerElement'] = $('slideflow'); SLIDEFLOW_DATA['images'] = new Array();
14/12/2010, 13h29
ditow

ça ne fonctionne pas....argh
15/12/2010, 09h40
gwyohm

Citation:

Envoyé par ditow

ça ne fonctionne pas....argh

Qu'as tu testé ? Qu'est-ce qui ne fonctionne pas ? Sur ton site, aucun des codes proposés n'apparait...
As-tu envoyé tes fichiers sur le serveur ? :aie:
15/12/2010, 11h58
ditow

Oh putain, j'ai tellement hon te de répondre ce que je m'apprêtte à repondre... J'uploadais bien le bon fichier... mais pas au bon endroit..( roh le con j't'ai dérangé pour rien. Ca marche parfaitement bien le simple ".update("")"
merci milles fois encore...

D( merci merci merci)