Backend List Inline Editor

Need Help
#1

I try to build an inline editor for a backend list, so the entries can directly be edited from the list without the need to go to the update-area of a model.

I’ve build up several inline buttons with handlers already:

        <button 
            data-request="onValidate"
            data-request-data="checked[]: <?= $record->id ?>"
            data-stripe-load-indicator>
        </button>

Works great so far.

The bigger issue however is, the update of some text fields like a name field.

Therefor, I have a text input field in another partial of the list entry and I would like to send the actual value of this input to the handler.

data-track-input
My first approach was “data-track-input”, but since I dont want to tigger the handler directly with a change on the input field, this is no option.

data-request-form
The second approach was “data-request-form”, but I couldnt get this to work. This is the form in the first partial:

<form name="formname_<?= $record->id ?>">
    <input id="name_<?= $record->id; ?>" value="<?= $firstName ?>">
</form>

And this here the button:

        <button 
            class="btn btn-default btn-sm oc-icon-check-square-o empty mb-1"
            data-request="onValidate"
            data-request-form="formname_<?= $record->id ?>"
            data-request-data="checked[]: <?= $record->id ?>"
            data-stripe-load-indicator>
        </button>

I tried to get the values with Input::get() but only the checked[] entry was inside the array.

Update of the data-request-data with JS
https://octobercms.com/forum/post/get-another-field-value-in-data-request-data?page=1
The third approach was an update of the data-request-data with JS as mentioned in the first post of this thread, but also didnt have success here. The thread suggests the first two solutions anyways. I also tried to grad the values with the post() method, but no luck.

Best solution would be the second approach with the additional form, so I hope to get some tipps on what I missed here. Thanks a lot ^^

#2

This plugin gives a good example of inline list editing:

1 Like
#3

Thanks a lot, but the List Switch wont help with the input field thing :wink:

However, it still brought me to the solution… in the one or other way:

So: If you would like to create an inputfield in a Backend List and Save the value on Enter, here’s the way to go:

    <form data-request="onEditName" data-request-data="checked[]:<?= $record->id ?>">
        <input name="name" value="<?= $inputValue; ?>">
        <button type="submit" hidden></button>
    </form>

Sends the record ID and the given input field value to the handler if you press Enter.

Hope this helps someone one day

BUT: There’s still one issue left:

When I type a “space” in this input field, the record opens. How can I stop this from happening?