jQuery.clone(false) still copy data from original source

Question

This post is a follow up with previous post, the application is running on jQuery 1.4 but advice from any version is appreciated:

Current problem is even use

rowTemplate = j('.form-denomination:first-child').clone();

and

var newRow = rowTemplate.clone().attr('id', newRowId);

I can see newRow still holds the old data in first child from the list using firebug, no matter what I select from web page.

For example, if the first child for the list to be cloned is node[0]

<select id="_denominations[0].id.denominationId" class="removableDenom" name="denominations[0].id.denominationId">
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
    <option value="500">500</option>
    <option value="5000">5000</option>
    <option value="50000" selected="selected">50000</option>
</select>

And I add a new row after node[2], it would look like

<select id="_denominations[3].id.denominationId" class="removableDenom" name="denominations[3].id.denominationId">
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
    <option value="500">500</option>
    <option value="5000">5000</option>
    <option value="50000" selected="selected">50000</option>
</select>

See it is still showing 50000 as selection for the dropdown box, even it shows 100 on the webpage So what's going on?

Are you conflating form data with jQuery `.data()`? You don't appear to be using `.data()`, but I see those hidden fields in your markup in the other question. The data referred to by the `withDataAndEvents` parameter to `.clone()` is the jQuery kind, not the form kind. — MattW, Mar 22 '13 at 17:28
"`denominations[3].id.denominationId` shows as null" - do you mean that "null" is sent to the server? — a better oliver, Mar 22 '13 at 17:34
@MattW so shall I use `.data()` after clone the whole row? But i think it is user to define data, here seems there is a lock on that duplicate row prevent user to edit. and something is wrong when submit form with such duplicate row. — Dreamer, Mar 22 '13 at 17:34
@zeroflagL No, I run the test again and see the value. Just updated the post. Thank you for point this out. — Dreamer, Mar 22 '13 at 17:38
@Dreamer you don't seem to have any need for `.data()`, but no form of `.clone()` will clear out the form data for you. — MattW, Mar 22 '13 at 17:38
@MattW So what exactly does the `false` do within the `clone()` function? the `data` defined in that function differs from the `data` within the DOM? — Dreamer, Mar 22 '13 at 17:45
@Dreamer jQuery's `.data()` is a mechanism for attaching arbitrary JS data to DOM objects. It has nothing to do with HTML forms. Had you used that feature on the element you were cloning, `.clone(false)` would not copy that attached data over to the clone, whereas `.clone(true)` would. — MattW, Mar 22 '13 at 17:50

score 3 · Accepted Answer · answered Mar 22 '13 at 17:40

3

"it is still show 50000 as selection for the dropdown box, even it shows 100 on the webpage"

What you see is the HTML source. 50000 is not the current value shown on the page, but the value that is (or rather would be in this case) shown when the page has loaded.

answered Mar 22 '13 at 17:40

a better oliver

26,330
2
58
66

That's right. Seems what can see from firebug doesn't count for what is going to submit in the form. – Dreamer Mar 22 '13 at 17:54

MattW · Answer 2 · 2013-03-22T17:51:45.677

You're asking more of .clone() than it's able to give, I'm afraid. It will not update ids for you; it will not update names for you; it will not clear out form data for you. You're going to have to do all of these things yourself - the form data you can clear on the template, but the ids you'll have to set when you do the insert.

rowTemplate = j('.form-denomination:first-child').clone();
rowTemplate.find("input[value], textarea").val("");
rowTemplate.find("select").each(function() { this.selectedIndex = 0; });

If we're able to assume that the first row will always have ids and names that are like [0], the update prior to insert will be a little easier:

var rowId = "[" + j('.form-denomination').length + "]";
var newRow = rowTemplate.clone();
newRow.find("[id]").each(function() { var $t = $(this); $t.attr("id", $t.attr("id").replace("[0]", rowId)); });
newRow.find("[name]").each(function() { var $t = $(this); $t.attr("name", $t.attr("name").replace("[0]", rowId)); });

seems clone() function by default with parameter as false. So really curious about what clone(true) can make a difference. — Dreamer, Mar 22 '13 at 17:50

jQuery.clone(false) still copy data from original source

2 Answers2