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+