Discussion :

[Difré91]

Bonjour à tous,

Je dois pour mon site offir la possibilité de cloner des éléments HTML potentiellement occupés par d'autres.

Il faut aussi que je change tous les identifiants (rajouter un suffixe je pense) et que je conserve les valeurs de tous les inputs.

J'ai déjà des idées pour faire une telle fonction, mais je me demandais :

- existe t-il déjà une telle fonction (dans un framework ou non) ?
- sinon je cherche les meilleurs manière de réaliser ça.

Je vais vous exposer ce que je compte faire pour voir si c'est réalisable et optimal.

Je pensais faire ça en récursif :
- choisr l'élément à cloner, le cloner, et après relancer la fonction récursivement sur tous ses fils que l'on ajoute au nouvel élément cloné.
- retourner l'élement cloné

Premier problème, comment gérer le texte entre les différents noeud fils ?

Et une autre question me vient à l'esprit, je pensais rajouter cette méthode en prototype aux éléments HTML de javascript (si cette fonction n'existe pas encore une fois).
Existe t'il une telle classe en javascript qui désigne n'importe quel élément HTML ?

Merci d'avance

[E.Bzz]

Bonjour,
à priori, cloneNode() devrait répondre à tes attentes

A+

[Difré91]

Bon, je savais que j'allais oublier des détails dans mon premier message.

Déjà merci pour la fonction E.Bzz, je vais surement m'en servir.

Mais je voudrais spécifier un suffixe qui se rajouterais à chaque id d'élements si les éléments en sont pourvus.

Parce qu'avec du JS, les identifiant sont assez important et faire une simple copie duplique aussi les id qui ne sont du coup plus uniques.

A mois encore qu'une telle fonction existe (et encore, il me faudrait aussi dupliquer du JS et le réévaluer, je doute fort qu'une telle fonction existe !), je pense devoir me recréer ma propre fonction.

Du coup, je cherche encore l'élement javascript qui désigne les éléments HTML (en gros la classe qui possède la méthode cloneNode() ).

Merci d'avance

[Bovino]

Code :

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

1
2
var nouvel_element = old_element.cloneNode(true);
nouvel_element.id = nouvel_id;

[Difré91]

Oui dans l'idée c'est ça, mais ...

Code :

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

1
2
3
4
5
6
 
<div id="conteneur">
  <div id="premier_fils">Toto</div>
  <div id="deuxieme_fils">Tutu</div>
  <div id="troisieme_fils">Titi</div>
</div>

ça va marcher là ?

Donc je pense utiliser le cloneNode en mode false (non profond). Et pour chaque noeud fils, si le noeud possède un id, lui rajouter le suffixe.

Mais en fait, je ne demande pas forcément que l'on me fasse la fonction (encore que ce serais vachement sympa ^^).
Je veux juste avoir des infos pour la suite qui vont me manquer, à savoir à quelle classe JS ajouter la fonction pour que la récursion marche bien.

Et de toute façon ma fonction va être plus complexe qu'un simple copier coller de HTML. J'aurais aussi du javascript à réévaluer, javascript modifié car les id seront modifiés aussi.

Enfin, y'a quand même un peu de reflexion derrière et je pourrais pas me contenter des fonctions préexistente (je pense en tout cas).

[SpaceFrog]

le clonage sera effectif mais le DOM sera perdu au niveau de la duplication des id si tu fais un cloneNode en profondeur car les sous id seront dupliqué.

Si tu ne peux pas ensuite renommer les childNodes du conteneur, on peut imaginer une fonction qui fasse la mêem chose que cloneNode mais en modifiant les id (incréments ?) au moyen d'une boucle for et d'un test sur l'id ...

[Difré91]

La question était rhétorique ^^

Mais merci quand même !!

[SpaceFrog]

oui je me doute ...
mais la réponse était juste pour te mettre sur la voie d'une fonction personnelles de clonage personnelle en reattribuant les propriétés essentielles de l'objet recapitulées dans un array par exemple.
attention de ne pas boucler littéralement sur toutes les propriétés de l'objet car on tombe dans une boucle sans fin.

par exemple pour IE tu selectionnes dans cette liste les propriétés recopiables:

Code :

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

nextSibling,onresizeend,onrowenter,aria-haspopup,childNodes,ondragleave,canHaveHTML,onbeforepaste,ondragover,onbeforecopy,aria-disabled,onpage,recordNumber,previousSibling,nodeName,onbeforeactivate,accessKey,currentStyle,scrollLeft,onbeforeeditfocus,oncontrolselect,aria-hidden,onblur,hideFocus,clientHeight,style,onbeforedeactivate,dir,aria-expanded,onkeydown,nodeType,ondragstart,onscroll,onpropertychange,ondragenter,id,aria-level,onrowsinserted,scopeName,lang,onmouseup,aria-busy,oncontextmenu,language,scrollTop,offsetWidth,onbeforeupdate,onreadystatechange,onmouseenter,filters,onresize,isContentEditable,aria-checked,aria-readonly,oncopy,onselectstart,scrollHeight,onmove,ondragend,onrowexit,lastChild,aria-secret,onactivate,canHaveChildren,onfocus,onfocusin,isMultiLine,onmouseover,offsetTop,oncut,parentNode,tagName,className,onmousemove,title,role,behaviorUrns,onfocusout,onfilterchange,disabled,parentTextEdit,ownerDocument,offsetParent,aria-posinset,ondrop,ondblclick,onrowsdelete,tabIndex,onkeypress,aria-relevant,onlosecapture,innerText,aria-live,parentElement,ondeactivate,aria-labelledby,aria-pressed,children,ondatasetchanged,ondataavailable,aria-invalid,onafterupdate,nodeValue,onmousewheel,onkeyup,readyState,onmovestart,aria-valuenow,aria-selected,onmouseout,aria-owns,aria-valuemax,onmoveend,contentEditable,document,firstChild,sourceIndex,outerText,isTextEdit,isDisabled,oncellchange,runtimeStyle,scrollWidth,aria-valuemin,onlayoutcomplete,onhelp,attributes,offsetHeight,onerrorupdate,onmousedown,clientTop,aria-setsize,clientWidth,onpaste,tagUrn,onmouseleave,onclick,outerHTML,ondrag,aria-controls,onresizestart,aria-flowto,ondatasetcomplete,aria-required,clientLeft,aria-describedby,all,onbeforecut,innerHTML,aria-activedescendant,aria-multiselectable,offsetLeft,align,dataSrc,dataFld,noWrap,dataFormatAs

exemple pris pour un div
après tu peux le faire pour tous les elements et tester

Code :

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

if (source.prop)

[Difré91]

Bah en fait je comptai utiliser cloneNode en mode non profond, qui me clonera tout les attributs. Et après remodifier l'id.

[SpaceFrog]

ça me parait la solution la plus simple.
l'avantage étant surtout au niveau des propriétés en readonly (tel que name sous IE)

[Difré91]

Ah oui, j'avais pas pensé à ça non plus

Il me faudra changer les IDs ET les names, si je clone des formulaires.
Bon, bah je m'embarque dans un truc bien compliqué là !! Enfin, c'est ce qu'on me demande.

Et le plus complexe, c'est le JS inclus dans les onclick. S'il se réferre à un élément à cloner (comme pour un toggle()), il va falloir que je puisse modifier la cible...

[SpaceFrog]

à mon avis tu aurais plus simple à utiliser un truc comme
http://www.developpez.net/forums/d53...ynamique-form/

suffit d'avoir par avance les jsons de chacun des objets, de paramètrer ensuite les elements à modifier (id, name)
et hop