www.webdeveloper.com
Results 1 to 6 of 6

Thread: a JS class facilitating cloning

  1. #1
    Join Date
    Apr 2009
    Posts
    4

    a JS class facilitating cloning

    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.

    http://cloner.sourceforge.net/

  2. #2
    Join Date
    May 2009
    Posts
    1
    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.

  3. #3
    Join Date
    Apr 2009
    Posts
    4
    Quote Originally Posted by face_studio View Post
    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.

  4. #4
    Join Date
    Apr 2009
    Posts
    4
    You can have a look at an online tutorial with some examples of the Cloner usage at http://niebiarz.eu/free/cloner_1_0.php?basics_functions - all abilities of the Cloner are described and presented...

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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

  6. #6
    Join Date
    Apr 2009
    Posts
    4
    Quote Originally Posted by Kor View Post
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles