Confirm delete record using bootstrap 4 modal

I have used Data Assist to create CRUD.
Now I want to use Bootstrap 4 instead of the design and CSS, which is created by DA.

But I don't know how to create a confirm delete record using bootstrap 4 modal instead of the modal that DA creates (on the results page). Can I start from the code that DA writes and just change a few lines to bootstrap 4 modal that is pasted in?

Absolutely. All of the functionality is server-side and the little client functionality is common javascript that will work in a bootstrap environment.

Thanks for your reply Ray. But unfortunately I do not get much wiser on that answer. What do I need to do?

1. I have the detail page that DA created.

2. I replace the code on the delete button from:
<input type="button" class="formButton ResultsPageButton xxxButton DeleteButton" value="" onclick="document.getElementById('WADADeleteRecordID').value=<?php echo($WADAlaromedel->getColumnVal("id")); ?>;document.getElementById('deleteBox').style.display = 'block';document.getElementById('deleteMessage').style.display = 'table';" />)

To: (<input class="btn btn-outline-danger" type="button" value="Radera" data-toggle="modal" data-target="#exampleModalCenter">).

3. I replace the modal code:
<input type="hidden" name="WADADeleteRecordID" id="WADADeleteRecordID" value="<?php echo($WADAlaromedel->getColumnVal("id")); ?>" />
</form>
</div>
<div id="Results_MatematikSverige_generell_ProgressMessageWrapper" class="blockUIOverlay" style="display:none;">
<script type="text/javascript">
WADFP_SetProgressToForm('Results_MatematikSverige_generell', 'Results_MatematikSverige_generell_ProgressMessageWrapper', WADFP_Theme_Options['BigSpin:Slate']);
</script>
<div id="Results_MatematikSverige_generell_ProgressMessage" >
<p style="margin:10px; padding:5px;" >
<img src="../webassist/progress_bar/images/slate-largespin.gif" alt="" title="" style="vertical-align:middle;" />&nbsp;&nbsp;Please wait
</p>
</div>
</div>

To the code from Bootstrap modal:
<!-- Modal -->
<div class="modal fade" id="delete_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmaiton</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="alert alert-danger" role="alert">
Are you sure you want to delete selected record?
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-danger" name="delete">Yes</button>
</div>
</div>
</div>
</div>

But this is not enough. What do I need to do more to make it work? Grateful for answers!

Can I get a url and FTP access to test?

It could be conflicting javascript or missing files. It is impossible to say.

Does it work if you create your own button and window?

When you say it doesn't work, do you mean the window doesn't display or that the delete doesn't work?

I'd get a window to open with the click of a button outside of the webassist code. Then once you are sure the basic concept works you can copy the webassist window content into yours. Then copy and replace the button last.

Yes, the Bootstrap modal window appears when I press delete. But the delete button is not dynamic yet. I do not know how to get the modal showing the current record that you are asked to confirm.

I don't think I can use the same code that DA writes to the delete button, since it is not the bootstrap modal it refers to:
onclick="document.getElementById('WADADeleteRecordID').value=<?php echo($WADAlaromedel->getColumnVal("id")); ?>;document.getElementById('deleteBox').style.display = 'block';document.getElementById('deleteMessage').style.display = 'table';" />

The Bootstrap modal use data-target instead of onclick, I think!

Please attach the file.

You should be able to use the same onclick event to set the value of the hidden form element:
onclick="document.getElementById('WADADeleteRecordID').value=<?php echo($WADAlaromedel->getColumnVal("id")); ?>;"

Then as long as the button has the same name and submits the form it should work. I think you can have both a data-target and onclick on the same button. The data-target is for opening the model, so that part is removed from the onclick.

Private attached

You need to have have <form> tag with the hidden form element and a button type="submit" with name="Delete". Then you need to add the onclick event back to repeated delete button to set the value of the hidden form element.

Thanks Ray. It was embarrassing that I missed the form tag and the hidden element. The longer you look at the code, the more whimsical it becomes - sometimes. Now the clock is very much in Sweden. But I will look into this tomorrow. Sometimes it's good if someone else looks at the code. But I understand that you have a lot more to do.

I have problems understanding the concept of confirm delete with modals. I have managed to get the modal to work on the results page. But I don't understand how to make it work on the detail page? I have tried to paste the same code, but nothing happens when I press the delete button.
What have I missed?