Is there any need or advantage in using a repeat in this case, instead of just using IN with the POST variable for the condition? The server connect would then just require two steps: Database Connection/Database Delete.
Many thanks to You @mebeingken for your help. Thanks to Your explanation and example, I finally understood the logic of communication frontend with the server part. Now it became obvious to me where I made mistakes.
I created a page with Your code and tweaked the structure in the table a bit to make it look better: http://co43498.tmweb.ru/page2.html (a page with your structure here: http://co43498.tmweb.ru/page1.html).
Deleting records finally worked! However, there were some minor side problems:
- If you select a record (1) and then press the “Delete” button (2)
- The entry will be deleted successfully (3), but for some reason the title of the column with checkboxes will turn green (4), and the checkbox will not disappear, but move to another entry (5).
The reason for the color change I did not understand. To remove the entries I added the clear form step to the dynamic delete event, but this did not help, the check box remains active.
Perhaps You have ideas to fix the problem change the color of the header and clearing checkboxes after a server action?
The form reset should be added to the on success event of the form. That might remove the green colour from ‘All’ too, which is set by Bootstrap:
Hello @TomD,
On page http://co43498.tmweb.ru/page2.html now I did.:
But unfortunately it doesn’t work.
The form.reset should be in the Form => Dynamic events=>server actions=> Success event
1 Like
Make sure you apply the event to the form - not to the server connect. (In fact you don’t need the Server Connect item at the top of your list).
1 Like
I removed Server Connect responsible for the removal, because it was really unnecessary. All dynamic events on success or error I added to the form itself:
But this did not solve the problem. The checkboxes are not reset, and the title color changes.
If no other validation is needed, you can add the novalidate parameter to the form tag, which should disable everything.
1 Like
Eureka! Everything works now!
Thank you all friends for Your help and clarification! It’s really valuable!
That’s great. But there is one issue you raised which I don’t think has been resolved - indicating the number of selected checkboxes (excluding the ‘All’ checkbox):
I don’t know the answer to this. I would be interested to know.
1 Like
Yes, You’re right. I initially planned to create a separate topic for addressing supplementary questions. But it’s probably not a good idea, and it is more appropriate to continue to search for answers in this thread, not to produce new subjects.
In this topic I raised another additional question. As a result, at the moment there are two questions:
-
indicating the number of selected checkboxes (excluding the ‘All’ checkbox):
-
disable the “Delete” button until at least one checkbox is marked:
The answers to these questions would help me to understand the logic of Wappler work much better and move forward in its study.
You could set a variable and attach it to the checkboxes with an onclick event to increment/decrement it’s value, but hopefully there is a better way - eg to count the number of seleted checkboxes. I don’t know if that’s possible in Wappler (but I could well be wrong). It if is possible, it would probably solve both of your outstanding issues.
Hey @TomD,
Create an array in the app, and use the on-updated of the checkbox to add a unique item to that array…then you can reference the count of the array.
Something like:
dmx-on:updated="id_checkbox_cell.checked == true ? arrayChecked.addUniq($index) : arrayChecked.remove($index)"
<p class="mt-3">Records selected: <b><i>{{arrayChecked.count}}</i></b></p>
2 Likes
I went to Your leadership, but apparently somewhere made a mistake:
- I created array in the app (1), then in static events I wrote the conditions you specified (2), and then put the value of the variable in paragraph (3):
Counting of checkboxes is not conducted unfortunately http://co43498.tmweb.ru/page2.html
The code I provided goes on the checkbox input, not on the array.
<input class="form-check-input" type="checkbox" value="" id="id_checkbox_cell" name="checkbox_cell[]" dmx-bind:checked="id_checkbox_all.checked" dmx-bind:value="tags[0].id" dmx-on:updated="id_checkbox_cell.checked == true ? arrayChecked.addUniq($index) : arrayChecked.remove($index)">
EDIT: Ignore my dmx-bind:value, which is different than yours. I was just using to test it out with my data.
1 Like
Amazing! Everything works as it should and the solution of the second question has become an elementary task! I am very grateful to You!
1 Like
Hello, so I’m trying to do the same thing, but instead of deleting, I need to insert multiple rows on my database.
The problem is that I’m not getting the checkboxes from the repeat step. I’m using nodeJS
Hello.
Have you checked the value of the check boxes coming to the server at all?
I would check two details:
-
First, I would check whether the value of the checkboxes in the array on the client side (in the form input) is displayed correctly.
-
If everything is OK in the first point, I would check whether the values coming to the server are correct. This is easy to do by simply inserting Set Value with the output in the server action to return an array of checkboxes. And use the console to see what values the server action returns.
If everything is normal. So the problem is on the Wappler side and we need to create a bug report. But most likely the problem is in one of these steps.