[AJAX] Menu lié : de innerHTML

Version imprimable

Bonjour.

Je pense que l'option innerHTML me pose problème.

code tpl

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
{literal}
	<script language='javascript'>
function getXhr(){
			var xhr = null;
			if(window.XMLHttpRequest) 
				xhr = new XMLHttpRequest();
			else if(window.ActiveXObject){ 
				try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
			}
			else { 
				alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
				xhr = false;
			}
			return xhr
		}
function load_lstdysf(){
			var val_ip = document.getElementById('ip_ordi').value;
			var xhr = getXhr()
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					leselect = xhr.responseText;
					document.getElementById('ip_ordi').innerHTML = leselect;
				}
			}
			xhr.open("POST","load_dysfon.php",true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.send('dte_dysf='+escape(document.getElementById('dte_dysf').value)+'& type=load_lstdysf');				
		}
</script>
{/literal}
<form name="ordi_enr" action="inter_ajout.php" method="post" onsubmit="return verif_form();">
<p align="center"><label for="dte_dysf">Surevenu le:</label>
						<input name="dte_dysf" type="text" value="" size="10" maxlength="10" >
 
						<label>IP : </label>
						<select name="ip_ordi" onchange="put_lbdysfon(this.value)">
								<option value="-1">Choisir une adresse ip</option>	
						</select></form>

le code php

Code:

1
2
3
4
5
6
7
8
9
10
<?php
	header("Cache-Control: no-cache, must-revalidate");
	header('Content-type: text/html; charset=iso-8859-1'); 
	require_once('config.inc.php');
echo "<select name='ip_ordi'>";
			$res = mysql_query("SELECT ip_ordin FROM tb_ordinateur");
			while($row = mysql_fetch_assoc($res)){
				echo "<option value='".$row["ip_ordin"]."'>".$row["ip_ordin"]."</option>";
			}
		echo "</select>";

En executant ce code il ne marche, alors pour tester ou se trouve le pb, je supprime la ligne

Code:

document.getElementById('ip_ordi').innerHTML = leselect;

et je la remplace par

Code:

alert(xhr.responseText);

Alors il affiche les valeurs, je conclus que c'est innerHTML qui est soit mal utilisé, soit par à sa place.

Merci de votre aide.

18/12/2009, 11h47
E.Bzz

Bonjour,

Code:

document.getElementById('ip_ordi').innerHTML

Visiblement, c'est simplement que tu ajoutes ton <select id='ip_ordi'> dans ... le <select id='ip_ordi'> :aie:

Dans ta fonction Ajax, il faut seulement que tu fasses références à l'élément qui contient le select, au lieu du select lui-même ;)

Quitte à créer un <div> contenant le select uniquement dans ce but, si d'autres éléments sont présent au même niveau.

A+
18/12/2009, 13h54
rudyhadoux2

leselect

Je ne vois pas où est déclarée ta variable leselect qui doit être un String.

C'est peut-être bien ça le problème.

rudy.
18/12/2009, 14h48
BILANGA

Citation:

Envoyé par rudyhadoux2

Je ne vois pas où est déclarée ta variable leselect qui doit être un String.

C'est peut-être bien ça le problème.

rudy.

Bonsoir,

Précisement à rudyhadoux2: je viens de déclarer leselect

Code:

var leselect = xhr.responseText;

Le résultat est toujours le même.

A E.Bzz: stp je n'ai rien compris de ton aide. Peux tu être assez précis ?
Merci à chacun pour son aide.

Ce que veut dire E.Bzz c'est que ta requête AJAX te retourne un select :
Code:

1 2 3 4 5 6 echo "<select name='ip_ordi'>"; $res = mysql_query("SELECT ip_ordin FROM tb_ordinateur"); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["ip_ordin"]."'>".$row["ip_ordin"]."</option>"; } echo "</select>";
Or tu fais ensuite un innerHTML sur un select, ce qui n'est pas autorisé en HTML ;)

Ceci dit, le problème essentiel vient bien du innerHTML car IE n'accepte pas de le faire sur une balise select : http://msdn.microsoft.com/fr-fr/libr...ml(VS.80).aspx

21/12/2009, 14h12
E.Bzz

+1 Bovino

D'où ma suggestion

Citation:

Envoyé par E.Bzz

Dans ta fonction Ajax, il faut seulement que tu fasses références à l'élément qui contient le select, au lieu du select lui-même ;)

Quitte à créer un <div> contenant le select uniquement dans ce but, si d'autres éléments sont présent au même niveau.

A+

Bonjour,

j'ai résolu le pb autrement.

Code:

1
2
3
4
5
var leselect = xhr.responseText;
					tabChaine=leselect.split('valeur');
					var lb=tabChaine[0];
					var val=tabChaine[1];
					document.forms.ordi_enr.ip_ordi.options[document.forms.ordi_enr.ip_ordi.options.length] = new Option(lb,val);

Merci:ccool: