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+

[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

[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

[ejilan]

J'ai l'impression de me retrouver a l'ecole devant une feuille de code qui te ferait regretter ton choix d'orientation

Je t'avouerai que je ne vois pas trop dans la librairie comment definir des attributs radios comme le OnClick.
Je sais que j'abuse, mais t'aurai pas un exemple concret comme la liste qui a ete faite.
Mais bon la, je sens que je m'egare en incluant une librairie.

Ne serait-il pas plus simple et plus pertinent de continuer sur le bout de code que j'ai commence ou bien ca devient trop complexe pour que je puisse continuer sur ma solution ?

[E.Bzz]

Encore une Contribution ...
Sinon, pour le onclick, ça irait sûrement mieux sans les majuscules ...

A+

[ejilan]

Presque bon.
(En meme temps, tout est relatif, mon souci du debut reste le meme, a savoir qu'au premier passage tout marche nickel, mais qu'au deuxieme mes boutons ne s'affichent plus).

Anyway, j'ai en revanche envie d'approfondir mon apprentissage du DOM, mais si ca ne me sert pas.

@Ebzz

Le onclick fonctionne.
Il s'agissait bien d'un probleme de definition du name, comme cela est resolu dans le post de "Auteur".

C'est dans la syntaxe du "function".
Bien sur, je pourrai mettre le code de la fonction SelectFirm en dur, seulement, j'ai pas trop envie de retourner a la prehistoire de l'algorithme lineaire.

Code :

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

Input.onclick = function(){"SelectFirm("+arrFirmID[i],arrFirmREF[i],i+")"};

[E.Bzz]

Code :

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

Input.onclick = function(){SelectFirm(arrFirmID[i],arrFirmREF[i],i);};

Non ?

EDIT : Arf ! J'ai peur qu'il applique à tous le dernier "i". Y a des discussions sur le sujet, mais pas retrouvées

A+

[ejilan]

Mince, me suis mal exprime.
Ce sont les valeurs passees en parametres qui, a l'interieur de la fonction sont undefined, alors que juste avant, je les vois correctement avec un alert.

Code :

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

1
2
3
4
5
6
 
 
for(i=0; i<6; i++){
.....
alert(arrFirmID[i]);
Input.onclick = function(){SelectFirm(arrFirmID[i],arrFirmREF[i],i)};

}

C'est le passage des parametres qui pose probleme, ce pour quoi j'ai tente des combinaisons avec des parentheses... Mon i, lui, est a 5 partout, meme lorque je selectionne le 1er bouton radio.

[Bovino]

Oui, c'est bien ce que voulait dire E.Bzz, la valeur passée lors du onclick est le dernier i, mais en plus, comme ta fonction a fini son exécution entre temps, le i (variable locale) n'existe plus donc vaut undefined...

Code :

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

1
2
3
4
5
6
7
8
9
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.id='ref'+i;
Input.onclick = "SelectFirm(" + arrFirmID[this.id.replace('ref','')] + ", " + arrFirmREF[this.id.replace('ref','')] + ", " + i + ")";

devrait aller mieux je pense

EDIT :
Le 'ref' dans le id est là pour respecter l'unicité de l'id dans la page puisqu'il semble que tu aies déjà des éléments avec l'id 'i'

[ejilan]

@bovino

Pas mal, le fait d'utiliser le champs id comme storage.

En utilisant ta solution

Code :

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

Input.onclick = "SelectFirm(" + arrFirmID[this.id.replace('ref','')] + ", " + arrFirmREF[this.id.replace('ref','')] + ", " + i + ")";

J'ai une erreur javascript 'this.id' null or not an object (why not...)



J'ai donc remplace le this par Input.

Code :

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

Input.onclick = "SelectFirm(" + arrFirmID[Input.id.replace('ref','')] + ", " + arrFirmREF[Input.id.replace('ref','')] + ", " + Input.id.replace('ref','') + ")";

La, pas d'erreur, mais le onclick ne reagit pas.




Last try, avec le mot-cle function devant

Code :

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

Input.onclick = function(){SelectFirm(arrFirmID[Input.id.replace('ref','')],arrFirmREF[Input.id.replace('ref','')],Input.id.replace('ref',''))};

Le onclick reagit, mais comme tu devines deja, il prend les dernieres valeurs de la boucle...
Donc la feinte de passer par un champs "storage" ne marche pas.

[ejilan]

Bon j'ai finalement reussi a creer un input type radio dans les regles de l'art DOM.

Seulement, je suis retourne a la Rome antique en demontant ma fonction SelectFirm.

Code :

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

1
2
3
4
5
6
 
Input.onclick = function(){
document.getElementById('hFirmId').value = arrFirmID[this.id.replace('ref','')];
document.getElementById('hFirmRef').value = arrFirmREF[this.id.replace('ref','')];
document.getElementById('hFirmName').value = this.id.replace('ref','');
};

Seulement cela n'a toujours pas resolu mon souci qui est que lorsque j'execute la fonction, tout marche nickel au premier passage, les choix de boutons sont affiches correctement, mais lorsque je veux la reutiliser une deuxieme fois, mes boutons radios ne s'affichent plus...
Et pourtant je detruis bien tous les vieux boutons precedemment crees

P.s : desole pour les effets de style, mais je ne voulais pas que l'on croit que le post etait resolu a la lecture de la premiere phrase du message

[ejilan]

Toujours en rade...

Je poursuis mon monologue

@Bovino

Il fallait rajouter a ta solution pour le onclick le mot-cle function devant, afin de conserver l'acces a ma fonction javascript SelectFirm

Code :

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

1
2
 
Input.onclick = function(){SelectFirm(arrFirmID[this.id.replace('ref','')],arrFirmREF[this.id.replace('ref','')],this.id.replace('ref',''))};

Et en m'inspirant du tuto de SpaceFrog http://javascript.developpez.com/faq...lick.dynamique
Je definis dans mon input un champ indice que je renseigne

Code :

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

1
2
 
 Input.indice = i;

Mon onclick devient alors.

Code :

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

1
2
 
 Input.onclick = function(){SelectFirm(arrFirmID[this.indice],arrFirmREF[this.indice],[this.indice])};

Ainsi j'evite l'utilisation de la fonction replace.

[Bovino]

Toujours en rade...

Le problème reste le même ?
Pourrais-tu mettre le code à jour de ta fonction et du html généré correspondant...

[ejilan]

Bon finalement, je ne suis qu'une tete de noeud qui ne sait pas jouer avec les div.

Je n'affichais pas le div de mes resultats au deuxieme passage, apres la fermeture du premier passage, alors que le div contenant souvrait correctement

--> Si ca peut (et meme surement) servir, je mets la solution final en ce qui concerne la creation d'un input type radio. (avec le br en prime )

Code :

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

1
2
3
4
5
6
7
8
9
Input = document.createElement("<input name='resultsFirm'>");
					Input.setAttribute("type", "radio");
					Input.setAttribute("Value", arrFirmNAME[i]);
					Input.indice = i;
					Input.onclick = function(){SelectFirm(arrFirmID[this.indice],arrFirmREF[this.indice],[this.indice])};
 
					Parent.appendChild(Input);
					Parent.appendChild(document.createTextNode(arrFirmNAME[Input.indice] + ', '+ arrFirmLOCATION[Input.indice]));
					Parent.appendChild(document.createElement("br"));

Bon sinon en tout cas j'en ai bien profite pour faire mon apprentissage du DOM.
Ce post eu au moins l'utilite de me faire decouvrir le DOM, le vrai (pas le bidouillage que j'ai l'habitude de pratiquer)


Merci a Bzz pour ses inspirations, le_chomeur pour ses questions et Bovino pour son sens aigue de la syntaxe.
Ainsi qu'a tous les auteurs de tutos cites dans ce sujet.( oui oui, on ne pense pas souvent a eux).