close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Confirm delete record using bootstrap 4 modal

Thread began 4/03/2019 1:01 pm by Jonas | Last modified 4/10/2019 7:07 pm by Ray Borduin | 68 views | 11 replies |

Jonas

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?

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

Jonas

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!

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Jonas

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!

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Jonas

Private attached

Attached Files
laromedel_results.php
Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Jonas

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.

Sign in to reply to this post

Jonas

Bootstrap modal confirm delete on the detail-page not work

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?

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...