Created
April 19, 2021 14:18
-
-
Save dparfrey/ee3372ff23c68701cbec51d6e249b2a8 to your computer and use it in GitHub Desktop.
Confirmation dialog (non-UJS) for Rails 6, Hotwire/Stimulus, and Bootstrap 5. Uses vanilla Javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is a replacement for the built-in Rails ujs confirmation method when using Bootstrap. | |
| // Trying to hook into the built-in stuff is a pain, and changes with every Rails (now Hotwire) | |
| // version. | |
| import { Controller } from "stimulus"; | |
| import { Modal } from "bootstrap"; | |
| export default class extends Controller { | |
| static values = { | |
| title: String, | |
| message: String, | |
| okButton: String, | |
| cancelButton: String, | |
| url: String, | |
| method: String, | |
| frame: String | |
| } | |
| connect() { | |
| // console.log('Confirm controller connect'); | |
| } | |
| click(event) { | |
| event.preventDefault(); | |
| let title = this.titleValue; | |
| let msg = this.messageValue; | |
| let ok = this.okButtonValue; | |
| if (!ok) { ok = 'OK'; } | |
| let cancel = this.cancelButtonValue; | |
| if (!cancel) { cancel = 'Cancel'; } | |
| let url = this.urlValue; | |
| let method = this.methodValue; | |
| if (!method) { method = 'get'; } | |
| let frame = this.frameValue | |
| if (frame) { | |
| frame = `data-turbo-frame="${frame}"`; | |
| } | |
| let dMethod = method === 'get' ? '' : " data-method=\"" + method + "\""; | |
| let html = ` | |
| <div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" aria-labelledby="ariaConfirmModal" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="confirmModalTitle">${title}</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| ${msg} | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-link" id="confirmModalCancelButton" data-bs-dismiss="modal">${cancel}</button> | |
| <a href="${url}" ${dMethod} class="btn btn-primary" | |
| ${frame} data-bs-dismiss="modal" | |
| id="confirmModalConfirmButton">${ok}</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div > | |
| `; | |
| var tempDiv = document.createElement('div'); | |
| tempDiv.id = 'temp-html'; | |
| tempDiv.innerHTML = html; | |
| document.body.append(tempDiv); | |
| let m = document.querySelector('#confirmDialog'); | |
| var confirmModal = new Modal(m); | |
| confirmModal.show(); | |
| m.addEventListener('hidden.bs.modal', function (event) { | |
| tempDiv.remove(); | |
| }) | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%# I chose not to do a link_to with data: because I don't like using underscores instead of dashes %> | |
| <%# when coding all the data-confirm-xxx variables. %> | |
| <a href="#" alt="Disable <%= company.name %>" | |
| data-controller="confirm" data-action="confirm#click" | |
| data-confirm-title-value="Disable this Company?" | |
| data-confirm-message-value="<p>Are you sure you want to disable the company "<%= company.name %>"?<p>" | |
| data-confirm-ok-button-value="Disable Company" | |
| data-confirm-url-value="<%= manage_company_path(company) %>" | |
| data-confirm-method-value="delete"> | |
| <i class="fa fa-lg fa-trash-o"></i> | |
| </a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is quite helpful. Thanks for putting it up. Any chance for direction on how to use this for a submit button on a form? I.E. have the
confirm-url-valueandconfirm-method-valuebe determined by the form tag?