0

Hey guys just a quick question, I tried to replicate this: Clone a div and change the ID's of it and all it's children to be unique

Its exactly what I want and need but I can't seem to make it work.

This is what I got: 

<div id="current_users">
    <table id="user_list">
        <tr id="user-0">
            <td id="first_name-0">Jane</td>
            <td id="last_name-0">Doe</td>
        </tr>
        <tr id="user-1">
            <td id="first_name-1">John</td>
            <td id="last_name-1">Doe</td>
        </tr>
    </table>
</div>
<button id="button" onclick="duplicate()">Click me</button>

<script>
    function duplicate() {
        $("#current_users").clone(false).find("*[id]").andSelf().each(function () { $(this).attr("id", $(this).attr("id") + "_cloned"); });
    }
  </script>

There are no errors showing up in my console, I tried looking for other solutions but this is the best I found. Thanks for those who can help

Community
  • 1
  • 1
Franz Justin Buenaventura
  • 366
  • 3
  • 20

3 Answers3

1

you are showing your clone on body. Create a div like 

<div id='cloned_output'></div>



function duplicate() {
    $("#current_users").clone(false).find("*[id]").andSelf().each(function () {

       $("#cloned_output").append( $(this).attr("id", $(this).attr("id") + "_cloned"));

    });
Vishal Anand
  • 1,431
  • 1
  • 15
  • 32
1

Try substituting .addBack() for .andSelf() using $.now() * (index + 1) within .each() to prevent duplicate ids in DOM , .appendTo() 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="current_users">
  <table id="user_list">
    <tr id="user-0">
      <td id="first_name-0">Jane</td>
      <td id="last_name-0">Doe</td>
    </tr>
    <tr id="user-1">
      <td id="first_name-1">John</td>
      <td id="last_name-1">Doe</td>
    </tr>
  </table>
</div>
<button id="button" onclick="duplicate()">Click me</button>

<script>
  function duplicate() {
    var clone = $("#current_users").clone(false);
    clone.find("*[id]").map(function(index, el) {
      el.id = el.id + "_cloned_" 
              + $.now() 
              * ( index + 1 );
      return el
    });
    clone.attr("id", function(index,id) {
      return id +"_cloned_"+ $("[id^=current_users]").length
    }).appendTo("body");
  }
</script>
guest271314
  • 1
  • 15
  • 104
  • 177
  • This works for me, I just need to change the appendTo and for the index. Actually I need to make it incremental but I think I can handle that. Thanks! Edit* Is there a way I can put appendTo it below the original div? – Franz Justin Buenaventura Sep 19 '15 at 03:55
  • `random()`?!? Really?? – Alexis Wilke Sep 19 '15 at 03:56
  • @AlexisWilke _"`random()`?!? Really??"_ ? Not certain interpret correctly ? – guest271314 Sep 19 '15 at 04:01
  • 1
    Wouldn't the above code append cloned tr's / td's to the body rather than the cloned table? or am I missing something? –  Sep 19 '15 at 04:03
  • You cannot sensibly be thinking that `random()` is going to give you a unique identifier. If you have a problem because index starts at 0, then add 1: `$.now() * (index + 1)`. – Alexis Wilke Sep 19 '15 at 04:05
  • @AlexisWilke _"cannot sensibly be thinking that random() is going to give you a unique identifier."_ See updated post. Adjusted to suggested `$.now() * (index + 1)` ; note, with only `$.now()` could return same timestamp for each element within current `.each()` iteration . `$.now() * ( index === 0 ? Math.floor(Math.random() * 1000)` would not return pseudo-random identifier ? – guest271314 Sep 19 '15 at 04:21
  • `random()` could return a value you are going to use again later... so if `random()` returns 0.001, you would get 1 twice. – Alexis Wilke Sep 19 '15 at 04:26
  • @AlexisWilke `$.now()`: `new Date().getTime()` . `new Date().getTime() * Math.floor(Math.random() * 1000)` could return duplicate ? – guest271314 Sep 19 '15 at 04:31
1

There's likely a more elegant jQuery way of doing this (my jQuery's fairly poor), but here's a step-by-step way. Appending to body in this example, but can easily be changed to appended to another element. Also assuming you want the entire div cloned.

function duplicate(){

  // Clone
  $cloned_users = $('#current_users').clone();
  $cloned_users.attr('id', $cloned_users.attr('id') + '_cloned');

  // Change all internal ids
  $cloned_users.find('*[id]').each(function(){
    $elm = $(this);
    $elm.attr('id', $elm.attr('id') + '_cloned');
  });

  // Append to body
  $('body').append($cloned_users);

  // Or, after original div
  // $cloned_users.insertAfter($('#current_users'));

}