Discussion :

[sativa808]

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 :

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

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 :

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

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

[sativa808]

Voici la nouvelle fonction ajouter():

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
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 :

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

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.

[SpaceFrog]

1) nommer ue variable form ...

Code :

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

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/

[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!

[SpaceFrog]

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

[sativa808]

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 :

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
 
<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 :

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
 
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++ ;
} }

@++

[SpaceFrog]

Code :

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

<div id="field_div" >

si tu clones celui là ...
change son id sinon tu auras plusieurs id ="field_div"

[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

[SpaceFrog]

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

[sativa808]

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

Code :

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

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 :

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
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.
@++

[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 ?

[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

j ai forcément pas bien construit cette boucle.

[sativa808]

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 :

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

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

où field est le clone. Mais c'est tellement approximatif

[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

[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

[SpaceFrog]

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

[sativa808]

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

j 'arrive donc a ajouter des lignes et à renommer les id's
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 :

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
 
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 :

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

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

[E.Bzz]

Bonjour,

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 :

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

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 :

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

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+

[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 ...

[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+