Show Confirmation Popup when Deleting Records

[Teodor]

You already know how to delete database records.
There are cases where you want to show users a confirmation dialog, asking them to confirm deletion. This can easily be done using Wappler static events and a simple method.

We have our dynamic table with a delete button for each of the records:

Select the delete record form:

Scroll down to STATIC EVENTS and click the add new static event button:

Select Form > Submit:

And then enter the following code: return confirm('Are you sure?');

Of course you can replace the text in the single quotes with any custom message you need to show.

The result is a native browser dialog, showing the custom message and OK and Cancel buttons. If the user clicks the OK button, the record will be deleted, otherwise the delete action won’t run:

[DecoresinSrl]

return confirm('Are you sure?');

How to apply this confirm to a button when it calls a server action ?

[TomD]

I usually display a confirmation modal with delete/cancel buttons. I expect you could display a button with a message, but then you would need to two other buttons - for the delete/cancel options. I would have thought a modal is the simplest solution.

[Heather_Mann]

Is there a solution for this other than using a confirmation modal? I’ve tried putting it wherever I can think of. For the most part the confirmation dialog still shows but the delete happens even on cancel.

I was having an issue using a form like the tutorial said as I was getting multiple form/fields of the same name errors so not sure how one would get around that.

Maybe I’m missing something?

[Teodor]

You can place the delete form inside a modal, and run it there.
Use buttons in the form to call this modal and set the hidden field value to the ID of the selected record.

[Heather_Mann]

I thought that was a more difficult solution but have implemented it today and it’s actually a more elegant look. It would be nice if Wappler had something like this built in but for now it works. Thanks.

[TomD]

I usually use modals for confirmation when deleting records, and also for inserts and updates. I put the three modals inside a single Data Detail component. I think this is a good solution. I wouldn’t have thought anything else could usefully be built in to automate this.

[RainerRichter]

I delete a record from a modal with the above confirmation popup, which works fine. If I click “cancel” in the confirmation popup, the record will not be deleted, which is correct, but the confirmation “Record deleted” from the successmsg of the delete serverConnect pops up neverthless. How can I prevent this?

[psweb]

Sorry, but without seeing the code, i’m not sure, as it would depend on your flow, it can not be a success of running the server connect delete action as a cancel would not run that, so I can’t imagine what type of success event it would be.

[RainerRichter]

Hi,
here is the Server Connect Part:

	    <dmx-serverconnect id="serverconnectDeleteCandles" url="/dmxConnect/api/DeleteCandle.php" noload="noload" dmx-on:success="browser1.alert('Erfolgreich gelöscht');serverconnect_allData.load();modal1.hide()"></dmx-serverconnect>

And here the Form Delete part. This one is placed inside the datadetails.

<form id="formDelete" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/DeleteCandle.php" onsubmit="return confirm('Bist Du sicher, dass Du diese Kerze löschen möchtest');">
<input id="inp_del" name="hiddenfield" type="text" class="form-control d-none" dmx-bind:value="modal1.data_detail1.data.ID">
<button class="btn btn-sm btn-danger" id="DeleteCdl" dmx-on:click="serverconnectDeleteCandles.load()" type="submit" onclick=""><i class="fa fa-trash-o fa-lg"></i>

							</button>
						</form>

Thanks!

[Teodor]

You should not use and don’t need a separate delete record server action included on the page.
You only need the server connect form, so remove the server action and add the success events on the form.

[RainerRichter]

OK, thanks. It’s working now correctly and I learned.

[Hyperbytes]

Now we have them on Wappler, using a bootbox confirm dialogue in a flow is a great alternative to using a modal in circumstances like this.