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

**ditow** · 22/11/2010, 21h26

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 html :

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

**gwyohm** · 23/11/2010, 15h01

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 :

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
 
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);

**ditow** · 23/11/2010, 21h18

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

**gwyohm** · 24/11/2010, 10h28

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

Code :

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

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);
};

**ditow** · 25/11/2010, 00h16

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

**gwyohm** · 25/11/2010, 10h38

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

**ditow** · 27/11/2010, 03h31

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?

**gwyohm** · 27/11/2010, 12h44

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.

**ditow** · 27/11/2010, 14h45

donc dans le lien je met l'url du fichier xml?

**ditow** · 04/12/2010, 03h29

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 :

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

**gwyohm** · 04/12/2010, 12h14

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)

**ditow** · 04/12/2010, 15h30

www.lucilemaiseau.com

**gwyohm** · 04/12/2010, 16h33

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 :

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
			<!--
				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 :

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

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);
};

**ditow** · 04/12/2010, 17h09

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

je vous aime.
merci beaucoup

Changer le fichier xml dans un script javascript par un lien HTML [Prototype]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager