Standalone collection editor problems

riggtek

Dear all,

I have problems to get the standalone editor with a collection working, it always updates all row ids after edit.

Javascript Part:

$(document).ready(function () {
     let editor = new $.fn.dataTable.Editor( {
        fields: [ 
            {
                label: "{{ _('Position') }}:",
                name:  "position"
            }, {
                label: "{{ _('Serial Number') }}:",
                name:  "serial_number"
            }
        ]
    } );

    $("#plan")
        .off("click", "span.pos-click")
        .on("click", "span.pos-click", function (e) {
            // Edit Entry
            editor
                .title("{{ _('Edit Information') }}")
                .message("{{ _('Enter Position and Serial number:') }}")
                .buttons([
                    {
                        label: '<i class="fa fa-times-circle"></i>',
                        fn: function () {
                            this.close();
                        },
                        className: "btn shadow-none p-0 ps-5 pe-5",
                    },
                    {
                        label: '<i class="fa fa-floppy-o"></i>',
                        fn: function () {
                            this.submit();
                        },
                        className: "btn shadow-none p-0 ps-5 pe-5 me-3",
                    },
                ])
                .edit( 'row_' + $(this).data("id") );            
        });
});

Template Part:

{% for i in range(0, 2) %}
  <div class="row my-3 flex-nowrap">
    {% for j in range(0, plan[i]|length) %}
    <div class="col panel text-center" data-editor-id="row_{{ plan[i][j].pos }}">
      <span class="fa-stack fa-2x pos-click" data-id="{{ plan[i][j].pos }}">
        {% if plan[i][j].available %}
        <i class="fa fa-circle fa-stack-2x text-success"></i>
        <strong class="fa-stack-1x label-circle-number" data-editor-field="position">{{ plan[i][j].nr }}</strong>
        {% else %}
        <i class="fa fa-circle fa-stack-2x text-muted"></i>
        <strong class="fa-stack-1x label-circle-number">&nbsp;</strong>
        {% endif %}
      </span>
      <br/>
      {% if plan[i][j].available %}
      <span class="label-circle-serial" data-editor-field="serial_number">{{ plan[i][j].sn|e }}</span>
      {% else %}
      <span class="label-circle-serial">&nbsp;</span>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endfor %}

riggtek

I solved it with a little workaround on the Save Button, instead of:

fn: function () {
    this.submit();
},

I inserted:

fn: function () {
    let cur_row = $(document).find("[data-editor-id='" + this.s.modifier + "']")
    for (const [key, value] of Object.entries(this.val())) {
        cur_row.find("[data-editor-field='" + key + "']").html(value);
    }
    this.close();
},

But a default solution would be fine.......