11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Voilà je cherche à faire la même chose, dans le principe, que la page de téléchargement des Widgets sur le site Apple. Soit 3 boîtes, la première affiche une liste, on clique sur une ligne, s'affiche alors une seconde liste dans la 2e boîte et enfin, en cliquant sur une ligne de cette 2e boîte, s'affiche le détail dans la 3e. Tout ça en AJAX avec Mootools. J'ai réussi la première étape mais je me demande si la seconde est possible.

Voilà mon code HTML
<div id="demarches">
<ul>
<li class="lien"><a id="d_camping" href="#camping">Camping</a></li>
<li class="lien"><a id="d_auberge" href="#auberge">Auberge</a></li>
<li class="lien"><a id="d_produits" href="#produits">Produits</a></li>
</ul>
</div>
<div id="fermes"></div>
<div id="detail_ferme"></div>


Mon Javascript :
window.addEvent('domready', function() {
	var myRequest = new Request.HTML({
		method: 'get',
		url: '../recherche.php',
		onRequest: function() {
			$('fermes').set('text', '');
			$('fermes').set('html', '<div id="load"><img src="load.gif" /></div>');
		},
		onSuccess: function(html) {
			$('fermes').set('text', '');
			$('fermes').adopt(html);
		}
	});
	$('d_camping').addEvent('click', function(e){
		e.stop();
		myRequest.send('demarche=camping');
	});
	$('d_auberge').addEvent('click', function(e){
		e.stop();
		myRequest.send('demarche=auberge');
	});
	$('d_produits').addEvent('click', function(e){
		e.stop();
		myRequest.send('demarche=produits');
	});
});


Avec ce code, quand je clique sur le premier lien <a id="d_camping" href="#camping">Camping</a> (par exemple), le contenu s'affiche bien dans #fermes. Par contre, ce qui s'est affiché dans #fermes, est-ce que j'ai moyen « d'agir » dessus afin de faire afficher dans #detail_ferme ?

Suis-je clair ?

Merci d'avance.
Modifié par atomekr (29 Aug 2008 - 08:18)