document.getElementById avec href

**kate59** · 23/01/2013, 21h48

je ne connais pas trop ajax tu pourrais m aider j'ai deja essayer avec le ajax et m y perd.merci.

**NoSmoking** · 23/01/2013, 22h17

je suis tombé sur

Envoyé par andry.aime

Regarde ce tutoriel.

A+.

as tu donné suite?

**kate59** · 23/01/2013, 22h46

le l'ai lu et la je comprend que la seule solution serait de remplir la zone de texte avec la bdd avec ajax mais la ca me semble tres loin car je n ai aucune connaisance et que j ai besoin de trouver une solution assez rapidement j aurai donc preference eviter le ajax.Donc la je ne sais pas trop quoi faire, avoir des bases et approfondir en ajax me mettrait au moins plusieurs semaine avant de le controler.Et je doit finir cette page cette semaine.

en peut ton pas recuperer la valeur avec un return?
var mSelect2 = t.options[t.selectedIndex].text;
return mSelect2;

Car si je comprend c est ce rechargement de page qui ne vas pas, ou ne peut on recharger la page et apres faire appel a la deux fonction onchange pour afficher l image?

MERCI

**andry.aime** · 23/01/2013, 22h47

Envoyé par kate59

je ne connais pas trop ajax tu pourrais m aider j'ai deja essayer avec le ajax et m y perd.merci.

Tu peux nous montrer l'essaie que tu as fait pour que l'on puisse le corriger?

**kate59** · 24/01/2013, 11h39

Bonjour,
voici le code:

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
46
47
48
49
50
51
<script>
function ChangerImage(t) {
   var mSelect = t.options[t.selectedIndex].value;
document.getElementById('Image').src = mSelect;
}
</script>
<script type="javascript">
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function ChangerTexte(t){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						//leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						//document.getElementById('illustration').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","GestGalerie.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('illustration');
				id = sel.options[sel.selectedIndex].text;
				xhr.send("ref="+id);
			}
		</script>

et la page d'appel:

Code :

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

<select onChange=\'ChangerTexte(illustration);ChangerImage(illustration)\' id="illustration" name="illustration" size="5" style="width:150px;">';

print_r post est desperement vide sur la page d appel.
Je viens a peine de commencer le AJAX soyez indulgent.
Je veux juste retourner la valeur selectionner au clic en post vers ma page.
merci.

**andry.aime** · 24/01/2013, 12h02

function ChangerImage(t) {
var mSelect = t.options[t.selectedIndex].value;

onChange=\'ChangerTexte(illustration);

Ecrit comme ça, illustration est une variable javascript, mais elle est définit où?

Code :

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

<script type="text/javascript">

Pour rafraichir le texte de l'image, tu modifies seulement l'id du div ou span à rafraichir dans la partie de code que tu as commenté pour la fonction d'onreadystatechange.

Et montre nous ton code HTML généré mais pas le code php de la page qui fait l'appelle Ajax.

A+.

**kate59** · 24/01/2013, 12h23

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
	</head><body>
<script>
function ChangerImage(t) {
   var mSelect = t.options[t.selectedIndex].value;
document.getElementById('Image').src = mSelect;
}
</script>
<script type="text/javascript">
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non support� par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* M�thode qui sera appel�e sur le click du bouton
			*/
			function ChangerTexte(t){
				var xhr = getXhr();
				// On d�fini ce qu'on va faire quand on aura la r�ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout re�u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						//leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						//document.getElementById('illustration').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","GestGalerie.php",true);
				// ne pas oublier �a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('illustration');
				id = sel.options[sel.selectedIndex].text;
				xhr.send("ref="+id);
			}
		</script>
...
 
	...
 
 
<form id="monForm" action="#" method="post">
<div id="sub_menu">
<a href="modifier.php?ref=">Modifier Photos Selectionner</a>
<a href="GestGalerie1.php"><img src="http://localhost/appartement/backend/images/retour.png" /></a>
</div>
<div id="new_left" style="float:left;width:45%;">
 
	 <fieldset>
 
        <legend>Donnees images</legend>
 
<div style="float:left;margin-left:50px;">
Previsualisation<br />
<img id="Image" src="http://localhost/appartement/backend/images/not-image.png" /></div>
<div style="float:right;">
Liste des images de ce Appartement <br />
 
<select onChange='ChangerTexte(illustration);ChangerImage(illustration)' id="illustration" name="illustration" size="5" style="width:150px;"><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_1_home.jpeg">velane _2_1</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_2_home.jpeg">velane _2_2</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_3_home.jpeg">velane _2_3</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_4_home.jpeg">velane _2_4</option><option value="http://localhost/appartement/backend/illustrations/home/2/velane _2_5_home.jpeg">velane _2_5</option>
 
</select>
...
 
	</body>
</html>

Illustration est le nom du select.

En faites je veux recuperer le text du select selctionner le renvoyer sur la page pour le mettre dans une variable php via le POST, pas dans un span ou div.
merci.

**kate59** · 24/01/2013, 16h37

bonjour,

j'ai retravailler sur le code mais ca ne marche pas:

Code :

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

<select onChange=\'showUser(this.value);ChangerImage(illustration)\' id="illustration" name="illustration" size="5" style="width:150px;">';

le 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
18
19
20
21
22
23
24
25
function showUser(str)
{
if (str=="")
  {
  document.getElementById("id_image").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("id_image").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","GestGalerie.php?ref="+str,true);
xmlhttp.send();
}