Discussion :

[ejilan]

Bonjour, apres quelques recherches infructueuses sur le net et sur le forum, je vous pose mon probleme.

J'ai une master page index.php dans laquelle je definis plusieurs objets (dont des div) dont deux en particuliers : un div principal, un label et un div_result.
Ces div sont caches par defaut.

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
 
<div id="dFirmSearch" type = "hidden"> // master div
<form id="fSearchResults" action="#" method="post" >	
 
	...
	<i><label id="tPreviousFirmName" name="tPreviousFirmName"></label></i> // label
 
 
 	<div id="dSearchForm">
 	 	Name:
      	<input type="text" name="iFirmName" id="iFirmName" />  // parametre de recherche
      	<input type="button" name="bSearch" id="bSearch" value="Search" onclick="searchFirm()" /> // fonction de recherche
 	</div>     
 
  	<div id="dSearchResults"> // div_results
 
      .....
 
     </div>
 
 
 
</form>	
</div>
 
<

En cliquant sur un bouton "ajout", ces deux derniers objets deviennent visibles, alors que mon div principal devient invisible.
En cliquant sur un bouton "recherche" dans le div_result, le contenu du label et du div_result est renseigne via une requete en AJAX selon un parametre de recherche. Je peux modifier ce parametre de recherche autant de fois que je veux et la requete Ajax s'execute correctement. Le label est juste du texte, le div_result est une generation de boutons radios issus du parametre de recherche.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var strResults = '';
				strResults += ' <hr />';
				strResults += ' <h1>Search results</h1> ';
 
 
 
while(...){
strResults += ' <input name="resultsFirm" type="radio" value="'+ arrFirmNAME[i] +'" onclick="SelectFirm(' + arrFirmID[i] + ', ' + arrFirmREF[i] + ', \'' + i + '\')"/>'+ arrFirmNAME[i] + ', '+ arrFirmLOCATION[i] +'<br />';
...
}
....
document.getElementById("dSearchResults").innerHTML = strResults;

Bon je crois savoir qui vomissent en voyant de la creation de div via innerHTML...sorry for that, j'suis trop mauvais.


Je clique enfin sur un bouton de validation qui enregistre toutes mes modifs, les deux div deviennent invisibles et le div principal redevient visible.

Jusque la, tout va bien. Au premier passage de ce scenario, tout bon !!





Maintenant je clique de nouveau sur le bouton "ajout", mes labels et div_result reaparaissent initialises a vide comme je le desire. Seulement lorsque je relance de nouveau ma fonction de recheche en fonction du parametre, le resultat est bien fourni par la fonction ajax, mon premier label contenant le texte est bien rempli, mon second div s'agrandit comme s'il allait recevoir les bouton radios, mais voila il reste vide et j'ai verifie dans un alert que 'strResults' est bien forme. C'est juste au moment du innerHTML que ca devient folklo.

Je rempli mes deux objets a l'aide de innerHTML.

Le probleme provient surement du html, mais la je seche, car je ne vois pas pourquoi il fonctionnerait correctement pour le label et pas pour le div, surtout qu'au premier passage du scenario, il n'y a pas de probleme.

Voila, besoin de vos lumieres.
J'espere que mes explications ont ete claires.

[E.Bzz]

Bonjour,

Bon je crois savoir qui vomissent en voyant de la creation de div via innerHTML...sorry for that, j'suis trop mauvais.

effectivement ce n'est pas recommandé

Par contre, là où ça devient carrément à ne pas faire, c'est lorsque la modif concerne le contenu d'un <form>. Dans ce cas les modif ne sont pas correctement répercutées dans la structure du document, d'où anomalies de fonctionnement

Désolé, mais va falloir y passer ...
(profites-en pour lire tout le §9)

A+

[ejilan]

Bonjour,effectivement ce n'est pas recommandé

Par contre, là où ça devient carrément à ne pas faire, c'est lorsque la modif concerne le contenu d'un <form>. Dans ce cas les modif ne sont pas correctement répercutées dans la structure du document, d'où anomalies de fonctionnement

Désolé, mais va falloir y passer ...
(profites-en pour lire tout le §9)

A+

@ E.Bzz :
Oki doky,
Jusque la, tout roule dans le tuto.
Seulement y paraitrait que les boutons radios sont pas "creeables" avec DOM --> http://www.developpez.net/forums/d26...boutons-radio/

Sinon c'est quoi le par.9 ?


@le_chomeur :

No pas d'erreurs dans la constructon du HTML, car le script marche nikel au premier passage.

Euh, oui oui, je modifie dSearchResults .

je ne me sers pas des champs pour poster par la suite.

[E.Bzz]

Sinon c'est quoi le par.9 ?

Tout le passage sur le DOM ...

je ne me sers pas des champs pour poster par la suite.

Alors supprime le <form> ...

A+

[ejilan]

Voila le code que j'ai pu faire pour mes boutons radios

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
 
var Input;
var Parent = document.getElementById("dSearchResults");
 
...
 
for (i=0;i<items_firm_id.length;i++){
...
 // Création du bouton radio
Input = document.createElement("input");
Input.setAttribute("type", "radio");
Input.setAttribute("Name", "resultsFirm");
Input.setAttribute("value", arrFirmNAME[i]);
Input.OnClick = "SelectFirm(" + arrFirmID[i] + ", " + arrFirmREF[i] + ", " + i + ")";
 
// Ajout au div nommé "dSearchResults"
Parent.appendChild(Input);
Parent.appendChild(document.createTextNode(arrFirmNAME[i] + ', '+ arrFirmLOCATION[i]));
 
//Parent.appendChild(document.createTextNode(<br>));
 
 
// Affichage du code de la Div
alert(Parent.innerHTML);
 
}

3 petits "hic" :

- mes boutons radios ne sont plus selectionnables.
- Par Consequent le OnClick ne fonctionne plus.
- Et je ne sais pas ou mettre le <br> pour passer a la ligne entre chaque option.

[E.Bzz]

Tu peux utiliser le magnifique script de SpaceFrog, qui corrige entre autres ce genre de soucis

+A

[le_chomeur]

je ne vois pas d'erreur de code , pt au moment ou tu remplis ta boucle :

Code :

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

1
2
3
4
while(...){
strResults += ' <input name="resultsFirm" type="radio" value="'+ arrFirmNAME[i] +'" onclick="SelectFirm(' + arrFirmID[i] + ', ' + arrFirmREF[i] + ', \'' + i + '\')"/>'+ arrFirmNAME[i] + ', '+ arrFirmLOCATION[i] +'<br />';
...
}

certain caractère posent peut-être problème...

tu ne touche pas a ta div dSearchResults ?

et comme la souligné E.Bzz tes champs de formulaire poseront problème si ut essayeras de les poster