attribute of the row element (not its children) are not updated

[Nicolas Schodet]

Hello again,

I would like to use the toArray method to send the current row order to the server. This require to have a different identifier on each row.

However, when an element is added, only the row children are inspected for the {{row-count-placeholder}} string.

Did I miss something? How do you send the new order to the server on your side?

[Naif Amoodi]

Hi,

Not sure I understood you there. Can you explain using an example what you are trying to do?

You are correct about the following:

However, when an element is added, only the row children are inspected for the {{row-count-placeholder}} string.

Only the new row being added has it's row-count-placeholder replaced because the existing rows already have these set or replaced. When you add an existing row on the server side, you need to take care of this place holder yourself. The index starts at 0. So if your database has 2 rows already, your script needs to number them as 0 and 1 respectively. When a new row is added on the front end, the next number will be 2.

[Nicolas Schodet]

Here is an example:

<li class="row template" data-not-ok="row_{{row-count-placeholder}}">
  <span data-ok="span_{{row-count-placeholder}}">Hi!</span>
</li>

When I add a new element, data-ok is replaced, but not data-not-ok. This is usefull if you want to use toArray or serialize from jQuery UI.

This is due to the selector $('*', new_row) which selects the children of new_row, but not new_row itself.

[Naif Amoodi]

Taking your example into consideration, replacement will not work for attributes pertaining to the row. Replacements only work on child elements. Can you try this instead?

<li class="row template">
  <div data-not-ok="row_{{row-count-placeholder}}">
    <span data-ok="span_{{row-count-placeholder}}">Hi!</span>
  </div>
</li>

[Nicolas Schodet]

The problem is that this does not work with serialize (or did I miss something?).

See http://jsfiddle.net/jomanlk/KeAer/2/ for an example of serialize.

[Naif Amoodi]

jQuery Sortable's toArray and serialize methods work on the ID attributes as you can see here: http://api.jqueryui.com/sortable/#method-serialize

So if you have a row with ID "name-naif", you'll get "name[]=naif"

<li class="row template" id="name-naif">
</li>

jQuery(function() {
    jQuery('form').submit(function() {
        alert(jQuery('.container').sortable('serialize'));
    });
});

[Nicolas Schodet]

Yes, I know, this is the default attribute, but you can see the point, the id attribute can not be updated by repeatable-fields because it needs to be placed on the "row" element, not its children.

[Naif Amoodi]

Ok, I understand what you mean now. What happens when you replace:

            $('*', new_row).each(function() {
                $.each(this.attributes, function(index, element) {
                    this.value = this.value.replace(/{{row-count-placeholder}}/, row_count - 1);
                });
            });

with:

            $(new_row).each(function() {
                $.each(this.attributes, function(index, element) {
                    this.value = this.value.replace(/{{row-count-placeholder}}/, row_count - 1);
                });
            });

            $('*', new_row).each(function() {
                $.each(this.attributes, function(index, element) {
                    this.value = this.value.replace(/{{row-count-placeholder}}/, row_count - 1);
                });
            });

[Nicolas Schodet]

I works.

Isn't there a selector to do it without copying the block? I am not used to jQuery.

[Naif Amoodi]

You can turn that block into a function and call it like this instead:

function rf_row_count_updater() {
    $.each(this.attributes, function(index, element) {
        this.value = this.value.replace(/{{row-count-placeholder}}/, row_count - 1);
    });
}

$(new_row).each(rf_row_count_updater);

$('*', new_row).each(rf_row_count_updater);

[Nicolas Schodet]

OK, your choice :)

Thanks.

[Nicolas Schodet]

I can not see the fix in last version, are you sure you pushed the correct version?

[Naif Amoodi]

I haven't pushed that version yet because I haven't tested it properly. You can download it from here though: http://www.rhyzz.com/repeatable-fields/js/repeatable-fields-development.js

Once I get a chance to test it thoroughly I'll push it to the repository.