A JS 'class' for cloning complex HTML blocks - automatically adds numbers and nesting suffixes to new clones, properly increments values of ID and NAME attributes in new clones, adds deletion links if needed, allows nesting clones within clones, adds event listeners to cloning links and clone deletion links, allows skipping some nodes from pattern blocks and setting maximum clones number for a given target - a lot of parameters you can modify, optional use of user functions for a better control over cloning process. Less than 10Kb in size, useful especially with complex forms.
there seems to be an unsolved problem with memory leaks (no functions to remove event listeners from cloning and deletion links), otherwise that's a really cool stuff. played with the Cloner class a little bit, lots of parameters to manipulate and personalize, autoincrementation and clone nesting rock!!! interesting stuff is interaction with user functions. I'm sure I'm gonna use it in my projects, would be great if someone rewrites this class as a jQuery plugin.
there seems to be an unsolved problem with memory leaks (no functions to remove event listeners from cloning and deletion links)
The thing is that the Cloner allows nesting clones within clones to an unlimited depth. You can have a clone nr 7 which has a couple of clones, one of which (say nr 5) has its own clones and so on. If you add deletion links to all nested clones and some user defined events bound to some elements within clones it's hard to control removing listeners. if you delete the parent clone nr 7, you need to delete it's deletion link event listener, deletion links event listeners of all it's children, and all deletion links of child clone nr 5 - not taking into account any user defined events. And that's only three levels deep.
There are surely some smart people around that could write a code to handle the problem - most probably all events should be added and stored in some array or JS object, cos that seems to be the only way to find and delete all event listeners in a given node/branch.
It looks like that toy missed an important workaround. For IE6 and IE7 name and type of the form's elements are readonly, thus a cloned form's element does not support an increment or a change of his name. There are a couple of workarounds for this bug, but I did not see any of them in that cloner.js
It looks like that toy missed an important workaround. For IE6 and IE7 name and type of the form's elements are readonly, thus a cloned form's element does not support an increment or a change of his name. There are a couple of workarounds for this bug, but I did not see any of them in that cloner.js
You just need to delve deeper into the code First of all, all data submitted by the form is properly structured, no matter whether you use nested clones or not. Try using complex nesting using example at http://niebiarz.eu/free/cloner_1_0.p...ing_targets_ex and submit the form - IE6, IE7 and IE8 all show properly structured tree reflecting exactly the same thing you created in the form.
There is one thing with the NAME attribute in IE6 and IE7 - you cannot change it after the element has been created and you cannot create a new element having its NAME attribute, unless this new element has its ID attribute whose value is the same as that of the NAME attribute. What the Cloner does it browses all nodes of a pattern in search of NAME attributes and wherever it finds them it adds proper suffixes to them and also creates an ID attribute (having the value identical to the value of the NAME attribute) for each such element.
I tested the Cloner using IE6 and IE7 trying to get cloned elements using document.getElementsByName method and they were all there. It works fine under all browsers
Reply With Quote
Originally Posted by face_studio
First of all, all data submitted by the form is properly structured, no matter whether you use nested clones or not. Try using complex nesting using example at 
Bookmarks