[DOM] CloneNode avec DOM, XHR ne suit pas

Version imprimable

Bsoir,
eh oui meme un samedi soir, on se relache pas!

Alors, j ai eu la bonne idée de creer un formulaire avec la possibilité de le cloner pour faire de la saisie en masse, (des articles en l'occurence).
D'ailleurs c'est ici même que j ai appris à faire ça avec le DOM!

Donc ça c'est bon.
Ensuite sur l'un des champs du formulaire, j'y ai ajouté une requete XMLHTTPREQUEST d'autosuggestion , et là rien ne vas plus!
C'est à dire que sur le noeud de référence c'est ok, mais pas sur les clones!

je pense à un problème d'ID qui n'est pas incrementer, et c'est le cas d'ailleurs.
Mais je sais pas faire, ou plutôt à quel endroit agir?

1. dans la fonction ajouter() celle qui clone mon formulaire(mon fieldset plutôt). en commentaire j'avais tenter ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function ajouter(){ i++; var obj = document.getElementById('field'); var form = document.getElementById('form1'); var div = document.getElementById('field_div'); var field = div.cloneNode(true);/*clonage*/ var button = document.getElementById('writeroot'); field.style.display='block'; inputs = field.getElementsByTagName('input'); for(var i = 0; i < inputs.length; ++i) inputs[i].value = ""; //field.id= this.id+i; button.parentNode.insertBefore(field,button); }
j'imagine qu en incrementant l'ID, il faudra mofifier l'appel XHR egalement, du genre:
Code:

1 2 3 4 function autosuggestReply() { if(xhr.readyState == 4){ var response = xhr.responseText; e = document.getElementById('results'+i);
bon , je vai encore chercher, peut etre à bientot, si vous savez faire, merci

Voici la nouvelle fonction ajouter():

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
 
n=0;
count=1;
function ajouter(){  
count++;	
var obj = document.getElementById('field');
var form = document.getElementById('form1');
var div = document.getElementById('field_div');
var field = div.cloneNode(true);/*clonage*/
var button = document.getElementById('writeroot');
div.style.display='block';	
/*pour que les champs soient vide par la suite*/
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
/*copie au bon endroit*/
//form.appendChild(field); 
//field.id= this.id+i;
search = document.getElementById('search-q');
 search.id='search-q'+count;
result=document.getElementById('results');
 result.id='results'+count;
 
 
button.parentNode.insertBefore(field,button);
//form.insertBefore(field,button);
n++ ;
}

Donc les ID des input sont bien incrementés, mais au bout de deux clones, j'ai une erreur, "search is null", et en effet, le div de référence a disparu au bout de deux clonages,donc circulez il n'y a plus rien à cloner!!

et il reste

Code:

1
2
3
4
 
<div><input id="id2" /> plus le reste du div </div>
<div><input id="id3" /> plus le reste du div </div>
<div><input id="id2" /> plus le reste du div </div>

notez la double présence de l'id numero 2.

31/08/2008, 16h40
SpaceFrog

1) nommer ue variable form ...

Code:

var form

c'est chercher les ennuis ...

2) Ensuite au niveau de clonage, changes tu l'id du div cloné ?
l'id doit etre unique sur la page ...

3) pour terminier changes tu les names de tes elements...

Pout ajouter dynamiquement des formulaires, jette plutot un oeil sur ce post :
http://www.developpez.net/forums/d53...ynamique-form/
31/08/2008, 17h12
sativa808

merci de t'interessé , car sui paumé,
1) ok pour la variable (renommée)
2) Bah non, vu que je fais un clonenode, le div global garde cet id, mais je m'en sers que pour ça!
3) euh idem pour les names,

j'ai deja lu ton code sur les form dynamique, mais vu que j'etais partis en mode construction DOM, si je chamboule tout maintenant, ça risque de pas aller.
D'ailleurs c'est par rapport aux names que ton code est interressant non?

Donc pr résumé, j ai:
un div de réference , une fonction ajouter(div), un appel ajax sur un champs text du form(autosuggest)
et voilà le soucis est bien de replacer la reponseText au bon endroit, et de pouvoir en recuperer les valeurs ensuite!
31/08/2008, 17h34
SpaceFrog

si tu clones ton div ... tu as plusieurs divs avec le même id non ?

Exact, code source a l'appui,
en fait dans la fonction ajouter, j'incrémente que quelques id's (ceux où doivent se placer le retour de la requête ajax).

dc je devrais incrementer tous les Id's ?

Par contre je comprend toujours pas pourquoi mon div de réference disparait au bout du deuxième clonage. La protection par 'display:none' semble adequat.
le form de base

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<form>
<div id="field_div" >  
      <fieldset id="field" ><!--style="display:none" -->
      <legend>article à deposer</legend>
 
 <div><p><label>marque</label></p>
 
	<input name="searchq[]" id="search-q" type="input" onkeyup="javascript:autosuggest(this.id)" autocomplete="off" />
       <input type="hidden" id="cach" name="marque[]" />
	<div class="update" name="result" id="results"></div>
 
<a href="popup.php" onclick="window.open(this.href,'popup','width=300,height=250');return false;">ajouter une autre marque </a>
</div>        
 
<a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" >supprimer  </a>
 <input type="hidden" name="test[]" value="" /> </fieldset> </div> 
 
 <span id="writeroot"></span>
 <input type="submit" name="submit" id="submit"value="Valider" /> OU <input name="button" type="button" onclick="ajouter();" value="Article supplémentaire" />  
 
 </form>

nouvelle fonction ajouter()

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
 
n=0;
for (var count=0;count<200; count++){
function ajouter(){  
 
var obj = document.getElementById('field');
var frm = document.getElementById('form1');
var div = document.getElementById('field_div');
var field = obj.cloneNode(true);/*clonage*/
var button = document.getElementById('writeroot');
 
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
 
var search = document.getElementById('search-q');
     search.id='search-q'+count;
var marque = document.getElementById('cach');
      marque.id= 'cach'+count;
     result=document.getElementById('results');
     result.id='results'+count;
obj.style.display='block';	
 
button.parentNode.insertBefore(field,button);
 
n++ ;
} }

@++

31/08/2008, 18h38
SpaceFrog

Code:

<div id="field_div" >

si tu clones celui là ...
change son id sinon tu auras plusieurs id ="field_div"
31/08/2008, 19h04
sativa808

ok,
excuses je vais paraitre bête mais, qu entend tu précisément par "changer" ?

Est ce incrémenter,ou changer son nom en créant un div par le DOM?
Je sais plusieurs ID du même nom c'est mal!!

Mais vu que je récupère rien de celui ci est ce que ça a une importance?

merfi
31/08/2008, 20h10
SpaceFrog

ben si tu le clones ... tu récupères son id ..

j'ai fais ça pour changer la valeur du id
Code:

1 2 3 4 5 6 i=0; var div = document.getElementById('field_div'); var field = div.cloneNode(true); field.id="field"+i; i++;
ça c'est bon!

Le hic est que vu que je modifie d'autre id aussi,,
lors du premier clonage je ne sais pas pourquoi, mais les id du div de reference changent pour les valeurs nouvellement definient!!! pourtant le clone est insérer bien plus loin dans mon formulaire..
c'est trop bizarre.
si quelqu un a envie de tester ma fonction, ça serait bien sympathique.
je l'ai deja retourner dans tout les sens ou presque
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 n=0; function ajouter(){ //var obj = document.getElementById('field'); //var frm = document.getElementById('form1'); var div = document.getElementById('field_div0'); /*clonage*/ var button = document.getElementById('writeroot'); var search = document.getElementById('search-q'); var marque = document.getElementById('cach'); var result=document.getElementById('results'); search.id='un'+n; marque.id= 'deux'+n; result.id='trois'+n; var field = div.cloneNode(false); field.style.display='block'; field.id = 'ogm'+n; /*pour que les champs soient vide par la suite*/ inputs = field.getElementsByTagName('input'); for(var i = 0; i < inputs.length; ++i) inputs[i].value = ""; //field.id= this.id+i; //div.appendChild(field); //count++;/*copie au bon endroit*/ button.parentNode.insertBefore(field,button); n++ ; //form.insertBefore(field,button); }
Le form qui va bien se trouve en haut du post.
@++

01/09/2008, 09h01
SpaceFrog

J'ai déja utilisé le cloneNode pour dupliquer des élements et je n'ai jamais eu de souci de modification de l'id du div de base ...

As tu visualisé le code source généré àprès chaque clonage ?
01/09/2008, 10h05
sativa808

salut,
bien moi je n'ai pas autant de chance on dirait, ;)

Donc premier affichage de la page:
Le div est caché par style display:none, ces id's portent les bonnes valeurs.(encore heureux).

premier clone:
le div caché voit ses id's enfants changés ,pas celui du div en lui même.

donc deuxième clone impossible par erreur getelemntById("id") is null

:aie: j ai forcément pas bien construit cette boucle.
01/09/2008, 14h54
sativa808

Un autosuggest sur chaque "Node" cloné.

bon au vu de la fonction, ceci etait normal,
en fait je changeai l'id de l'element recuperé donc au premier clic , ensuite irrecuperable,

Donc en fait il faudrait que j'arrive à ecrire ceci:
" changer les ids des noeuds enfants du clone"

j'ai penser à

Code:

field.childNodes[].setAttribute('id','result'+n);

où field est le clone. Mais c'est tellement approximatif
06/09/2008, 14h51
sativa808

Bon je vais tenter de m'y remettre ce weekend ,
j ai bien cherché sur le web je n'ai trouvé qu'une personne qui veuille faire la même chose.

Le but est de poser une zone "autosuggest" sur un champ input cloné dynamiquement.
Vraiment si quelqu'un à déjà réalisé cela, bienvenue :D
10/09/2008, 13h58
sativa808

Bon et bien je crains que ça ne soit pas possible de placer une reponse ajax dans plusieurs <div> différents du même document,,
arff:aie:
10/09/2008, 14h12
SpaceFrog

Heu si je le fais sur certains de mes sites ...il faut juste splitter la reponse ...

ahhh SpaceFrog, toujours là pour me redonner espoir! :D
bon sérieusement, tu a du bien cerner mon désespoir depuis!

j 'arrive donc a ajouter des lignes et à renommer les id's :D
dans chacune de ces lignes un input text appelle un autosuggset ajax

Et comme dans toute fonction autosuggset bien conçue on colle la réponse par innerhtml dans un div que l on récupère par son identifiant.
Il faudrait passer cet identifiant en paramètres de autosuggest peut etr, mais j'y arrive pas vu que la fonction est appelée depuis un autre noeud!
OUF!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function searchSuggest(x,y) { // évite de lancer une recherche si une est déjà en cours if (http_request.readyState == 4 || http_request.readyState == 0) { var str = escape(document.getElementById(x).value); http_request.open("GET", "search.php?search=" + str, true); http_request.onreadystatechange = function () { if (http_request.readyState == 4) { var ss = document.getElementById(y) ; ss.innerHTML = ''; var str = http_request.responseText.split("\n"); for(i=0; i < str.length - 1; i++) { var suggest = '<div onmouseover="javascript:suggestOver(this);" '; suggest += 'onmouseout="javascript:suggestOut(this);" '; suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; suggest += 'class="suggest_link">' + str[i] + '</div>'; ss.innerHTML += suggest; } }
Code:

1 2 3 4 <input name="searchq[]" id="search-q" type="input" onkeyup="javascript:searchSuggest(this.id,'results');" autocomplete="off" /> <div class="update" name="result" id="results" ></div>
PS: je pensais à nextSibling pour atteinde le div qui suit le input d'ou est appellée la fonction,, serait ce une Bonne idée?

je sais pas si je suis clair dans ce que je raconte ;)

10/09/2008, 15h05
E.Bzz

Bonjour,

Citation:

Envoyé par sativa808

PS: je pensais à nextSibling pour atteinde le div qui suit le input d'ou est appellée la fonction,, serait ce une Bonne idée?

Code:

this.parentNode.getElementsByTagName("div")[0].innerHTML;

Il peut y avoir un problème quand ne ramène qu'un élément : il ne retourne plus un tableau d'élément, mais l'élément lui même. A tester si tel est le cas :

Code:

this.parentNode.getElementsByTagName("div").innerHTML;

Sinon, vu tes ID ci-dessus, je ne suis pas sûr que tu les incrémentes bien tous. Un seul ID dupliqué suffit à planter ton code (en cas d'accès) ...

EDIT : nextSibling risque de poser problème suivant les nav. Ceux-ci ne gérant pas tous les noeuds (vides) de la même façon ...

A+
10/09/2008, 15h11
SpaceFrog

passe l'id de destinaiton en paramètre et dans la focntion après le retour ajax attribues le innerHTML du div dont tu as l'id ...
10/09/2008, 15h11
E.Bzz

Normalement, tu as dû renommer ton div, et tu devrais pouvoir "retrouver" (= recalculer) son ID pour y accéder directement ...
Ca serait encore préférable ;)

A+

Citation:

Envoyé par SpaceFrog

passe l'id de destinaiton en paramètre et dans la focntion après le retour ajax attribues le innerHTML du div dont tu as l'id ...

dc là j'essaide passer le div en paramètre avec le code suggèré de E.Bzz:

Code:

1
2
3
4
 
<input name="searchq[]" id="search-q" type="input" onkeyup="javascript:searchSuggest(this.id,this.parentNode.getElementsByTagName('div')[0]);" autocomplete="off" />
 
	<div class="update" name="result" id="results" >

et donc je passe 'y' qui pointe normalement sur le div

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function searchSuggest(x,y) {   
    // évite de lancer une recherche si une est déjà en cours 
    if (http_request.readyState == 4 || http_request.readyState == 0) { 
        var str = escape(document.getElementById(x).value); 
        http_request.open("GET", "search.php?search=" + str, true); 
        http_request.onreadystatechange = function () {  
    if (http_request.readyState == 4) { 
 
 
 
       // var ss = document.getElementById(y) ;
        y.innerHTML = ''; 
        var str = http_request.responseText.split("\n"); 
        for(i=0; i < str.length - 1; i++) { 
            var suggest = '<div onmouseover="javascript:suggestOver(this);" '; 
            suggest += 'onmouseout="javascript:suggestOut(this);" '; 
            suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; 
            suggest += 'class="suggest_link">' + str[i] + '</div>'; 
            y.innerHTML += suggest; 
        } 
    }

mais y is undefined;

Citation:

Normalement, tu as dû renommer ton div, et tu devrais pouvoir "retrouver" (= recalculer) son ID pour y accéder directement ...
Ca serait encore préférable

en fait le div est renommé à chaque ajout de ligne, oui, mais tu veux dire dans quel fonction je pourrais y accèder?
@++

10/09/2008, 16h00
E.Bzz

Citation:

Envoyé par sativa808

en fait le div est renommé à chaque ajout de ligne, oui, mais tu veux dire dans quel fonction je pourrais y accèder?

Tu dois pouvoir le récupérer à partir de this.id, puisque l'id de l'input a dû être généré avec la même valeur de compteur que pour le div. Et ainsi reconstituer l'id du div ...

Sinon, as-tu essayé avec

Code:

this.parentNode.getElementsByTagName('div') // sans [0]

comme suggéré ? (cas où le parentNode ne contient qu'un seul div)

A+
10/09/2008, 16h13
SpaceFrog

EBzz .. ce sera une collection même avec un seul div dopnc [0] obligatoire ...

bon je pense avoir essayer toute ces solutions, ,je n'ai plus d erreur sous firebug mais se passe rien LOL!
Juste une erreur 'mal formé' sur </li>, et le pire c'est que je ne génére pas de liste enfin je crois pas!

Mais bon je demande pas qu on me ponde le code adequat, mais si tu a dejà mis ça en place sur un de tes sites, est ce que tu pourrais me donner un exemple concret SpaceFrog s'il te plais?

car voilà donc ou j en suis:
1- fonction searchSuggest (x,y)
2-
Code:

1 2 3 4 5 6 <p><label class="fieldset">marque</label> <input name="searchq[]" id="search-q" type="input" onkeyup='javascript:searchSuggest(this.id,this.parentNode.getElementsByTagName("div")[0]);' autocomplete="off" /> <div class="update" name="result" id="results" ></div></p>
3- var ss=y.innerHTML=''; pour ecrire la reponse.

tout à l air ok, mais non :aie:

11/09/2008, 08h34
SpaceFrog

Un exemple concret

voici un vieux site tout pourri:
http://www.sebemex.fr/Extramiante/Ca.../index.htm#SAD

au chargement de la page, un ajax va chercher un fichier texte sur le serveur et splitte le résultat puis clone un element sur la page pour le reproduire et construire le menu (moche certes mais ça j'y peux rien )
La seconde étape, au click sur une rubrique, ajax retourne chercher un autre fichier texte sur le serveur, le splitte clone un autre élément de la page pour afficher la liste des produits ....
Jette un œil sur le source de la page, tu n'y verras que les templates qui seront clonés et remplis ...
11/09/2008, 13h59
sativa808
je crois que tous se passe bien comme vous m'avez montré avec e.bzz et toi,
je dis je crois, car plus d'erreur de dom ou JS, seulement une erreur de syntaxe
Code:

1 2 3 4 5 6 Erreur*: erreur de syntaxe Fichier Source*: http://127.0.0.1/form/search.php?search=m Ligne*: 1, Colonne*: 1 Code Source*: morgan
par exemple la lettre 'm' est passé en paramétres d'url, on voit qu'il retourne même le résultat"morgan".

mais ps d'affichage ds le div

merci pr l'exemple concret!
11/09/2008, 14h15
E.Bzz
Ca correspond pas bien au message, mais :
Code:

1 2 for(i=0; i < str.length - 1; i++) { var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
Sort la déclaration de la boucle. Sinon : multi-déclaration => erreur.

De plus, enlève les "Javascript:" dans tes évènements ...

A+

on diarit que 'e' n' est pas atteignable dans la deuxieme fonction, non?
est possible de declarer 'e' en parametre de autosuggest() et de l'utiliser dans la fonction plus bas dans le code ?

@++
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function autosuggest(a,e) { // évite de lancer une recherche si une est déjà en cours if (http_request.readyState == 4 || http_request.readyState == 0) { var str = escape(document.getElementById(a).value); nocache = Math.random(); http_request.open("GET", "search.php?search="+str,true); http_request.onreadystatechange = function () { if (http_request.readyState == 4) { var str = http_request.responseText; e.innerHTML=str; //alert(str); e.style.display="block"; } } http_request.send(null); } }
Bon ce coup ci cà vient vraiment bon, affichage dans deux <div> different youpi!
vai essayer de pas tout casser sur la finition (remplir le div et faire disparaitre la liste) @+++

12/09/2008, 15h36
sativa808

:salut:

Bon je pense pas m'enflammer, mais c'est enfin pil-poil!!

dynamique à mort mais vraiment sale, lol.

1- affichage dans autant de clone possible
2- le remplissage se fait à grand coup de parentNode

:merci: à vous deux SpaceFrog et E.Bzz (je prononce bien j'éspère)!

Vive la fonction alert() maîtresse du debogage !!

j'èspér maintenant pouvoir recuperer proprement tout ça lors du POST du formulaire!

Ps: le code final est dans le "post" précédent, la fonction remplir est un peu crade, mais si ça intéresse, demandez!

@++ longue vie à JavaScript et DOM vu que je commence à capter :P