[AJAX] evenement JS par interpr�t� par innerhtml

Version imprimable

30/01/2009, 10h00
tokens

[AJAX] evenement JS par interpr�t� par innerhtml

Bonjour � tous

Voila depuis quelque jours je suis block� sur un probl�me.
j' ai utilis� le script du site http://siddh.developpez.com/articles/ajax/

qui marche parfaitement, par contre, et voila mon probl�me je n'arrive pa � ajouter un �v�nement JS avec "onchange" sur la liste d�roulante g�n�rer dans le DIV...

j' ai remarqu� dans la source de la page m�me si le select s'affiche correctement une fois g�n�rer on ne retrouve pas les informations dans la source de la page (tjrs le div vide ).

J' aimerais connaitre la mani�re de faire ou orienter mes recherches car je suis novice en AJAX et XMLHttpRequest et je d�sesp�re.... :(

merci
31/01/2009, 10h57
Bovino

Effectivement, en r�gle g�n�rale, les fonctions "Voir la source" des navigateurs montrent le code pr�sent � l'ouverture de la page.
Il existe des outils (web developper toolbar ou Firebug pour FF, debugbar pour IE) qui permettent de voir le code source actualis�.
Pour ce qui est d'affecter un onchange, un peu de code serait utile !

voila le code

La fin du code de la page

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<form action="/Nipra_V1/fbt/facturation.php"  method="post" name="clientfact">
    <table width="903" border="0">
      <tr>
        <td colspan="2"  align="center"><p></p>
            <select name="clientsel" id="clientsel" onChange="verifclient2();">
              <option>Selectionner un client déja référencé ou rentrez le manuellement ci-dessous</option>
              <?php   
 
 
		  $rs = " SELECT * FROM `client` ORDER by id ASC";
$resu =  mysql_query($rs) ;
while ($result = mysql_fetch_array($resu))
 
{
$idclient = $result["id"];
 $nomclient = $result["nomclient"];
 
  print "<option  value=".$idclient." >".$idclient."/".$nomclient."</option>"    ;  }   ?>
            </select>        </td>
      </tr>
      <tr>
        <td width="256">&nbsp;</td>
        <td width="637">&nbsp;</td>
      </tr>
      <tr>
        <td align="right"><strong>Raison Social/ Nom</strong></td>
        <td align="left"><input name="nomclient" type="text" id="nomclient" value="" size="50" onKeyUp="javascript:couleur(this);" />
            <input  type="hidden" value="" name="idclient" id="idclient"/></td>
      </tr>
      <tr>
        <td align="right"><strong>Adresse1</strong></td>
        <td align="left"><input name="adresse1" type="text" id="adresse1"  value=""size="40" onKeyUp="javascript:couleur(this);" /></td>
      </tr>
      <tr>
        <td align="right"><strong>Adresse2</strong></td>
        <td align="left"><input name="adresse2" type="text" id="adresse2" value="" size="40" /></td>
      </tr>
      <tr>
        <td align="right"><strong>Code postal</strong></td>
        <td align="left"><input type="text" name="codepost" id="codepost"  value=""  onChange="go();"/>
          <span id="listecode"   >
          <select  id="listecode2" name="listecode2" onChange="message();">
          <option>lol</option>
          <option>lol2</option>
          </select>
          </span>
            <input name="ville" type="text" id="ville"  value="" size="0" onKeyUp="javascript:couleur(this);" />        </td>
      </tr>
      <tr>
        <td align="right">&nbsp;</td>
        <td align="left">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type='button' value='Type de Paiment' onClick='test();'  ></td>
      </tr>
    </table>

Une partie du javascript de la page

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
41
42
43
44
45
46
47
48
49
50
function message() {
       alert("hello")
   }
 
 
			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 go(){
				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('listecode').innerHTML = leselect;
 
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxlistecode.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
 
				idauteur = document.getElementById('codepost').value;
				xhr.send("codepost="+idauteur);
			}

Page apel� par ajax : ajaxlistecode.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
	echo "<select  name='listecode2' id='listecode2' onChange = 'message();'  >";
	if(isset($_POST["codepost"])){
		mysql_connect("localhost","root","");
		mysql_select_db("nipra");
		$res = mysql_query("SELECT codepost,libelle,id FROM codepostal WHERE codepost LIKE '".$_POST["codepost"]."%'");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["codepost"]."/".$row["libelle"]."</option>";
		}
	}
	echo "</select>";
?>

tout marche tr�s bien sauf l'�v�nement Onchange ou n'importe quel �v�nement dailleurs sur le select g�n�r� par ajax

merci :roll:

31/01/2009, 12h43
Bovino

onchange est un �v�nement JavaScript, donc m�me plac� en tant qu'attribut HTML, il n'est pas �valu� par Ajax, il faut ins�rer le responseText dans la page, puis affecter la gestion des �v�nements aux nouveaux �l�ments.
31/01/2009, 13h49
tokens

merci

Merci de ta r�ponse .

Je vais essayer de combler mes lacunes car je ne comprend pas tout.

A ce que j' ai lu en vitesse il faudrait utiliser quelque chose comme �a:

addEventListener ??

c' est tout nouveau pour moi faut le temps que je comprenne, je vais encore m'instruire.

merci de m'avoir mis sur le bon chemin :P

Code:

1
2
3
4
5
6
7
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        leselect = xhr.responseText;
        document.getElementById('listecode').innerHTML = leselect;
        document.getElementById('listecode2').onchange = message; 
    }
}

Devrait suffire � priori.

31/01/2009, 17h45
tokens

merci

Merci pour cette technique , je ne savais pas qu'on pouvait affecter un evenement comme cela en javascript.

Mais malheureusement ceci ne fonctionne pas, pourtant �a devrait marcher nickel... �a a l'air bon comme raisonnement.
:cry:

arf, je v tester encore on ne sais jamais

merci quand m�me
31/01/2009, 17h58
tokens

R�solu

Finalement, j ai trouv� le probl�me , je suis trop un boulet mdr...

Ta m�thode fonctione parfaitement Merci
Merci beaucoup vraiment ;)

Le probl�me etait trop trop b�te , j'ose m�me pas l'�crire.......

Je travaillais tout simplement pas sur la bon fichier......

arf... quel boulet !!

Merci � tous et surtout Bovino