Discussion :

[theophile76]

Bonjour,
voilà je voudrais faire quelque chose mais je ne sais pas trop comment m'y prendre et par où commencer.
En fait j'ai un div1 et un select1, un div2 et un select2, ... comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1"></div>
<div id="div2"></div>
 
<select name="select1">
<option>...</option>
...
<option>...</option>
</select>
 
<select name="select2">
<option>...</option>
...
<option>...</option>
</select>

Je voudrais qu'au moment ou je clique sur une option du select1, le contenu de la div 1 change pour afficher un contenu en rapport avec l'option choisit comme ceci : http://nsa20.casimages.com/img/2010/...1041299060.png

Je pense qu'en utilisant "innerHTML" de js on pourrait mais je n'arrive pas à partir et j'ai rien trouvé sur le net pour m'aider.
Sinon j'ai pensés le faire avec des include php qui "s'activeraient" ...

(Il y a un autre problème qui va se poser c'est que je compte créer un bouton "enregistrer" après tout cela avec 2 choix : enregistrement provisoire (cookies) ou enregistrement (connections membre), pour que la personne n'ai pas besoin de refaire les choix la prochaine fois.
Je pense bien que cette étape sera trop compliqué pour l'instant, mais je veux juste que ma base me permettre de faire ceci par la suite, voilà pourquoi j'ai pensais à utiliser du php.)

Merci.

[voyageurdumonde]

J'ai deja cherche pour faire cela afin de remplacer des Iframe mais il n'y a pas de solution. Tu peux par contre afficher/cacher le contenu d'une div mais pas le changer

[theophile76]

J'ai deja cherche pour faire cela afin de remplacer des Iframe mais il n'y a pas de solution. Tu peux par contre afficher/cacher le contenu d'une div mais pas le changer

Ok merci, j'y ai pensé, en utilisant des DIV en DISPLAY:NONE mais vue le nombre d'OPTION que j'ai dans mes SELECT ça me parait assez compliquer à gérer.

[scourjean]

AJAX non ?

Et après tu mets le contenu avec :

Code :

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

$("#div1").html();

[theophile76]

Merci.

J'ai trouvé quelque chose de pas mal du coté de jquery, je vais voir ce que ça donne ^^:

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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 	// le document est chargé
   $("a").click(function(){ 	// on selectionne tous les liens et on d�finit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page � charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});
 
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#contenu").empty(); // on vide le div
	$("#contenu").append(donnees); // on met dans le div le r�sultat de la requete ajax
}
</script>
 
<a href="contenu1.html">contenu1.html</a>
 
<a href="contenu2.html">contenu2.html</a>
 
<div id="contenu">
	Contenu avant utilisation des liens
</div>

Par contre je ne comprend, il n'y a pas de php et je dois quand même passer par mon serveur wamp pour que ça fonctionne ?

[theophile76]

le problème avec ce code c'es qu'il ne fonctionne qu'avec un lien, et moi j'en cherche un qui fonctionnerais avec des OPTION de SELECT.

[KiranoO]

euh j'ai leger l'impression que tous le monde se prend grave la tete pour rien ?

Deja il serai souhaitable de savoir quelle somme d'info doit rentrer dans le div, si c'est tous une documentation avec de la mise en page etc, il faut utiliser jquery, sa sera plus simple et beaucoup plus rapide. Si ce n'est qu'une phrase je propose ceci :

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
 
<script>
function DonneAuDivLaValeur(lavaleur,lediv)
{
//moi j'aurai tenté quelque chose comme sa
//document.getElementById(lediv).innerHTML=lavaleur;
//certes rapide mais c'est une methode un peu perieuse qui ne marche pas a tous les coups et qui n'est pas trés orthodoxe
//on va plutot faire simple
 
if(lediv=='div1')
{
document.getElementById('div1').innerHTML=lavaleur;
}
 
if(lediv=='div2')
{
document.getElementById('div2').innerHTML=lavaleur;
}
 
}
<script>
 
<div id="div1"></div>
<div id="div2"></div>
 
<select name="select1" onchange="DonneAuDivLaValeur(this.value,'div1')">
<option value="toto1div1">...</option>
 
 
<select name="select2"onchange="DonneAuDivLaValeur(this.value,'div2')">
<option value="toto1div2">...</option>

La valeur est facultative.
J'ai pas testé le bout de code que je vient de faire, mais l'utilisant souvent je pense qu'il fonctionne
Voilou c'est une possibilité, mais il y en a plein d'autre, plus evolutive surement.
J'espere que cela t'aidera
Bon courage

EDIT sinon tous connement :

Code :

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

1
2
3
4
5
6
 
<select name="select1" onchange="document.getElementById('div1').innerHTML=this.value">
<option value="toto1div1">...</option>
 
<select name="select2" onchange="document.getElementById('div2').innerHTML=this.value">
<option value="toto1div2">...</option>

J'y avait pas pensé, mais c'est plus rapide, tous va dependre encore une fois des infos a rentrer dans le div

[brisso]

Salut,
j'ai eu pas mal de soucis ne m'y connaissant pas trop mais j'ai trouvé deux solutions : une en jquery
http://tutorialzine.com/2010/01/swee...uery-ajax-css/

et l'autre en js "simple" que j'utilise sur le site d'un pot : http://www.antoineb.fr/

le script en question :

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
<script type="text/javascript">
function showPane(id) {
  var e,i;
  var PID = "content"; // the id of the parent element
  var p = document.getElementById(PID); // parent element
  // loop through each of the childNodes of the parent element
  for (i=0; i<p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType!=1) continue; // pass over non-element nodes
    if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";
    }
  }
}
 
 
</script>

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
<a href="#accueil" onclick="showPane('accueil')">accueil</a>
<a href="#accueil" onclick="showPane('univers')">univers</a>
<div id="content">

    <div id="accueil">
              contenu div accueil 
    </div>

    <a name="univers"></a> pour y accéder par le lien de ton menu

    <div id="univers">

              contenu div univers 

    </div>
</div>

en espérant avoir aidé.

[drOoops]

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
<script type="text/javascript">
function showPane(id) {
  var e,i;
  var PID = "content"; // the id of the parent element
  var p = document.getElementById(PID); // parent element
  // loop through each of the childNodes of the parent element
  for (i=0; i<p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType!=1) continue; // pass over non-element nodes
    if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";
    }
  }
}
 
 
</script>

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
<a href="#accueil" onclick="showPane('accueil')">accueil</a>
<a href="#accueil" onclick="showPane('univers')">univers</a>
<div id="content">

    <div id="accueil">
              contenu div accueil 
    </div>

    <a name="univers"></a> pour y accéder par le lien de ton menu

    <div id="univers">

              contenu div univers 

    </div>
</div>

en espérant avoir aidé.

Bonjour,

Ce petit bout de code correspond bien à mon besoin, seulement j'ai un petit problème. En effet lors du premier affichage les deux div sont affichées.

Existe-t-il un remède?
Cordialement.

[vermine]

Bonjour,

Oui drOoops, le plus simple dans ce cas-ci est de l'écrire directement en HTML :

Code :

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

<div id="univers" style="display:none">

[drOoops]

Super, merci beaucoup.

Bonne soirée.