Would be great to see a tutorial on this if someone could have a go, I have seen table data that launch modals or click edit first etc.
But nothing inline built in Wappler
https://mdbootstrap.com/docs/jquery/tables/editable/#!
You can create an option to edit inline quite easily in Wappler.
In the example above, I created two rows - one for displaying data and one for editing it. Only one row is shown at a time, depending on the value of a variable, eg:
dmx-show="inline_edit.value == 1"
This has a default value of 0. There is a button to toggle the value of the variable.The editing row has a form with a submit button (though, as discussed above, there are different ways to handle this).
Essentially, it’s no different to using the show/hide dynamic attributes in any other situation.
2 Likes
Using the blur method, how should the data be sent to the Update action? Currently, I’m sending an update, but the update has no query parameters attached to it, so no data is actually being updated.
Would anyone mine screenshotting how to connect the input box to the update query?
I’m no expert, but I did recently get this working perfectly in my own project.
I just set the dynamic event to Blur -> submit form.
The form does NOT have auto-submit selected and everything works fine. I also added some reset and server connect reload events on the Blur Click to update the data the momeent the user leaves the cell.
Does that help or do you want more screen shots?
Thanks Philip. So I have a similar thing in the Dynamic Event:
Is your server connect “looking” for the data somehow?
Without knowing exactly what you have set up or not, as long as the form is a server connect form, and in that query you have the POST parameters named EXACTLY the same as the NAME field as the input on the app connect side, then it should pass the data correctly.
At least that’s how i would explain it to myself 
How did you get the row for editing? I can understand how you’re hiding the row, but how do I go about getting an editable row?
There are two rows - one with an editable textarea, which is only visible if a condition is met:
dmx-show="inline_edit.value == 1" (or without the ’ ==1’ if you prefer)
This variable is set using the blue button at the top right (in the animated gif above). The other changes to the table display also use this variable and dynamic show/hide attributes.
Thanks! So the editable textarea is simply an input field? But then how do you bind that to the appropriate table cell? So when you update the cell, it knows which database field to update?
The name attribute determines the field to update - in the normal way (name attributes don’t have to be unique) and the $index will determine which repeat value to use. Here’s the form, including the textarea:
<form dmx-bind:id="(text + $index)" is="dmx-serverconnect-form" action="../../dmxConnect/api/admin/translations/translation_update.php" dmx-on:success="sc_translation_list.load({})" method="post" dmx-show="inline_edit.value">
<div class="input-group">
<input name="id" type="hidden" class="form-control" dmx-bind:value="translation_id" />
<textarea class="form-control" dmx-bind:value="text" name="trans_text"></textarea>
<div class="input-group-append">
<button class="btn ml-0 btn-outline-info" type="submit" dmx-bs-tooltip="'save changes'" data-html="true"><i class="fal fa-save"></i></button>
</div>
</div>
</form>
@TomD Thanks will try this soon. Just one thing, where is the the $index that you’re referring to? I don’t see it in the code you embedded.
Sorry - I pasted in the whole form and for some reason the first part was chopped off when it appeared here. However, in any case I was talking nonsense. I was using $index to create unique id attributes for the forms within the repeat, but these are not actually needed. The ID value for the update (to update the correct record) is sent using the hidden input included in the code above.
1 Like
@TomD Thanks for the help, was still a bit of a puzzle but I pieced it together at last.
2020.12.10 12.51 - 1174 - Imperatorangel
Any idea how to get rid of the console errors? Already tried to give the elements unique id’s but since I’ve got two forms doing the same now it’s still giving duplicate ID’s.
This is what I mean with ‘doing the same’:
1 Like
Do you need the IDs?
@TomD I don’t have a use for them right now.
BUT if I remove them:
It breaks the table by giving me [object Object] instead of the value’s. (this kept happening today whenever I remove the ID or put the ID to something that is used somewhere(?) (like “first_name”) )
I’m not sure why [object Object] is appearing. Perhaps the field type is incorrectly defined for First Name. In any case, perhaps it’s best to keep the IDs (though I don’t think they’re needed to make this work). Is there any reason why the same ID is used for both forms?
Don’t use names and ids for your inputs, which as the same as a data binding used as a value. This causes the [object Object] error.
In SC (API) insert and update actions auto generate inputs that have the same name as the columns, would it be plausible to add a default prefix such as ‘inp_’ to each so they never clash with results from queries in a repeat/table? Appreciate, it would mean the populate part of generating a form would need to be adjusted to spot cases where the prefix was present and match with the correct column.
Thank you!! I can now remove the id’s and simply change the names:
- Clean console
- No [object Object] errors
For anyone finding this in the future, these are my final input fields in the table cell:
<input name="id-to-edit" type="hidden" class="form-control" dmx-bind:value="id">
<input name="first_name_edited" type=" text" class="form-control editablerow" dmx-on:blur="editFirstName.submit()" dmx-bind:value="first_name">
1 Like
Hello, would there be documentation on the inline edition?