Confirmez la suppression de modal / dialog avec le bootstrap Twitter?

J’ai un tableau HTML des lignes liées aux lignes de la firebase database. Je voudrais avoir un lien “supprimer la ligne” pour chaque ligne, mais je voudrais confirmer avec l’utilisateur au préalable. Est-il possible de le faire en utilisant la boîte de dialog modale Twitter bootstrap?

GET recette

Pour cette tâche, vous pouvez utiliser des plug-ins et des extensions bootstrap déjà disponibles. Ou vous pouvez créer votre propre popup avec seulement 3 lignes de code. Vérifiez-le.

Disons que nous avons ces liens (notez data-href au lieu de href ) ou des boutons pour lesquels vous voulez avoir une confirmation de suppression pour:

 Delete record #23  

Ici, #confirm-delete pointe vers une fenêtre contextuelle modale dans votre code HTML. Il devrait avoir un bouton “OK” configuré comme ceci:

  

Maintenant, vous avez seulement besoin de ce petit javascript pour effectuer une action de suppression:

 $('#confirm-delete').on('show.bs.modal', function(e) { $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href')); }); 

Ainsi, sur show.bs.modal , le bouton de suppression d’événement href est défini sur URL avec l’ID d’enregistrement correspondant.

Démo: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview


Recette POST

Je me rends compte que dans certains cas, il peut être nécessaire d’effectuer une requête POST ou DELETE plutôt que GET. Il rest assez simple sans trop de code. Jetez un oeil à la démo ci-dessous avec cette approche:

 // Bind click to OK button within popup $('#confirm-delete').on('click', '.btn-ok', function(e) { var $modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); $modalDiv.addClass('loading'); $.post('/api/record/' + id).then(function() { $modalDiv.modal('hide').removeClass('loading'); }); }); // Bind to modal opening to set necessary data properties to be used to make request $('#confirm-delete').on('show.bs.modal', function(e) { var data = $(e.relatedTarget).data(); $('.title', this).text(data.recordTitle); $('.btn-ok', this).data('recordId', data.recordId); }); 
 // Bind click to OK button within popup $('#confirm-delete').on('click', '.btn-ok', function(e) { var $modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); $modalDiv.addClass('loading'); setTimeout(function() { $modalDiv.modal('hide').removeClass('loading'); }, 1000); // In reality would be something like this // $modalDiv.addClass('loading'); // $.post('/api/record/' + id).then(function() { // $modalDiv.modal('hide').removeClass('loading'); // }); }); // Bind to modal opening to set necessary data properties to be used to make request $('#confirm-delete').on('show.bs.modal', function(e) { var data = $(e.relatedTarget).data(); $('.title', this).text(data.recordTitle); $('.btn-ok', this).data('recordId', data.recordId); }); 
 .modal.loading .modal-content:before { content: 'Loading...'; text-align: center; line-height: 155px; font-size: 20px; background: rgba(0, 0, 0, .8); position: absolute; top: 55px; bottom: 0; left: 0; right: 0; color: #EEE; z-index: 1000; } 
      Delete "The first one", #23  

http://bootboxjs.com/ – derniers travaux avec Bootstrap 3.0.0

L’exemple le plus simple possible:

 bootbox.alert("Hello world!"); 

Depuis le site:

La bibliothèque expose trois méthodes conçues pour imiter leurs équivalents JavaScript natifs. Leurs signatures de méthode exactes sont flexibles car chacune peut prendre différents parameters pour personnaliser les étiquettes et spécifier les valeurs par défaut, mais elles sont généralement appelées comme suit:

 bootbox.alert(message, callback) bootbox.prompt(message, callback) bootbox.confirm(message, callback) 

Voici un extrait en action (cliquez sur “Exécuter l’extrait de code” ci-dessous):

 $(function() { bootbox.alert("Hello world!"); }); 
       
  // ---------------------------------------------------------- Generic Confirm function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) { var confirmModal = $(''); confirmModal.find('#okButton').click(function(event) { callback(); confirmModal.modal('hide'); }); confirmModal.modal('show'); }; // ---------------------------------------------------------- Confirm Put To Use $("i#deleteTransaction").live("click", function(event) { // get txn id from current table row var id = $(this).data('id'); var heading = 'Confirm Transaction Delete'; var question = 'Please confirm that you wish to delete transaction ' + id + '.'; var cancelButtonTxt = 'Cancel'; var okButtonTxt = 'Confirm'; var callback = function() { alert('delete confirmed ' + id); }; confirm(heading, question, cancelButtonTxt, okButtonTxt, callback); }); 

Je me rends compte que c’est une très vieille question, mais depuis que je me suis demandé aujourd’hui une méthode plus efficace pour gérer les modaux bootstrap. J’ai fait des recherches et trouvé quelque chose de mieux que les solutions présentées ci-dessus, que l’on peut trouver sur ce lien:

http://www.petefreitag.com/item/809.cfm

Commencez par charger le jquery

 $(document).ready(function() { $('a[data-confirm]').click(function(ev) { var href = $(this).attr('href'); if (!$('#dataConfirmModal').length) { $('body').append(''); } $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm')); $('#dataConfirmOK').attr('href', href); $('#dataConfirmModal').modal({show:true}); return false; }); }); 

Alors, posez simplement n’importe quelle question / confirmation à href:

 Delete 

De cette façon, le modal de confirmation est beaucoup plus universel et peut donc facilement être réutilisé sur d’autres parties de votre site Web.

Grâce à la solution de @ Jousby, j’ai également réussi à faire fonctionner le mien, mais j’ai dû améliorer un peu le balisage modal Bootstrap de sa solution pour le rendre correctement, comme le montrent les exemples officiels.

Donc, voici ma version modifiée de la fonction de confirm générique qui a bien fonctionné:

 /* Generic Confirm func */ function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) { var confirmModal = $(''); confirmModal.find('#okButton').click(function(event) { callback(); confirmModal.modal('hide'); }); confirmModal.modal('show'); }; /* END Generic Confirm func */ 

J’ai trouvé cela utile et facile à utiliser, en plus il est joli: http://maxailloud.github.io/confirm-bootstrap/ .

Pour l’utiliser, incluez le fichier .js dans votre page, puis exécutez:

 $('your-link-selector').confirmModal(); 

Il y a différentes options que vous pouvez lui appliquer, pour que cela soit plus agréable lorsque vous le faites pour confirmer une suppression, j’utilise:

 $('your-link-selector').confirmModal({ confirmTitle: 'Please confirm', confirmMessage: 'Are you sure you want to delete this?', confirmStyle: 'danger', confirmOk: ' Delete', confirmCallback: function (target) { //perform the deletion here, or leave this option //out to just follow link.. } }); 

Je peux facilement gérer ce type de tâche en utilisant la bibliothèque bootbox.js. Au début, vous devez inclure le fichier JS bootbox. Ensuite, dans votre fonction de gestionnaire d’événements, écrivez simplement le code suivant:

  bootbox.confirm("Are you sure to want to delete , function(result) { //here result will be true // delete process code goes here }); 

Site officiel de bootboxjs

La solution suivante est meilleure que bootbox.js , car

  • Il peut faire tout ce que bootbox.js peut faire;
  • La syntaxe d’utilisation est plus simple
  • Il vous permet de contrôler élégamment la couleur de votre message en utilisant “error”, “warning” ou “info”
  • Bootbox a 986 lignes de long, le mien seulement 110 lignes de long

digimango.messagebox.js :

 const dialogTemplate = '\ '; // See the comment inside function digimango_onOkClick(event) { var digimango_numOfDialogsOpened = 0; function messageBox(msg, significance, options, actionConfirmedCallback) { if ($('#digimango_MessageBoxContainer').length == 0) { var iDiv = document.createElement('div'); iDiv.id = 'digimango_MessageBoxContainer'; document.getElementsByTagName('body')[0].appendChild(iDiv); $("#digimango_MessageBoxContainer").html(dialogTemplate); } var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; textBoxDefaultText = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; textBoxDefaultText = options.textBoxDefaultText; } if (showTextBox == true) { if (textBoxDefaultText == null) $('#digimango_messageBoxTextArea').val(''); else $('#digimango_messageBoxTextArea').val(textBoxDefaultText); $('#digimango_messageBoxTextArea').show(); } else $('#digimango_messageBoxTextArea').hide(); if (okButtonName != null) $('#digimango_messageBoxOkButton').html(okButtonName); else $('#digimango_messageBoxOkButton').html('OK'); if (cancelButtonName == null) $('#digimango_messageBoxCancelButton').hide(); else { $('#digimango_messageBoxCancelButton').show(); $('#digimango_messageBoxCancelButton').html(cancelButtonName); } $('#digimango_messageBoxOkButton').unbind('click'); $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick); $('#digimango_messageBoxCancelButton').unbind('click'); $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick); var content = $("#digimango_messageBoxMessage"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); if (digimango_numOfDialogsOpened == 0) $("#digimango_messageBox").modal(); digimango_numOfDialogsOpened++; } function digimango_onOkClick(event) { // JavaScript's nature is unblocking. So the function call in the following line will not block, // thus the last line of this function, which is to hide the dialog, is executed before user // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count // how many dialogs is currently showing. If we know there is still a dialog being shown, we do // not execute the last line in this function. if (typeof (event.data.callback) != 'undefined') event.data.callback($('#digimango_messageBoxTextArea').val()); digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } function digimango_onCancelClick() { digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } 

Vous pouvez essayer plus réutilisable ma solution avec la fonction de rappel . Dans cette fonction, vous pouvez utiliser une requête POST ou une logique. Bibliothèques utilisées: JQuery 3> et Bootstrap 3> .

https://jsfiddle.net/axnikitenko/gazbyv8v/

Code HTML pour le test:

 ...  Test Remove Action  ... 

Javascript:

 $(function () { function remove() { alert('Remove Action Start!'); } // Example of initializing component data this.cmpModalRemove = new ModalConfirmationComponent('remove-data', remove, 'remove-btn-a-id', { txtModalHeader: 'Header Text For Remove', txtModalBody: 'Body For Text Remove', txtBtnConfirm: 'Confirm', txtBtnCancel: 'Cancel' }); this.cmpModalRemove.initialize(); }); //---------------------------------------------------------------------------------------------------------------------- // COMPONENT SCRIPT //---------------------------------------------------------------------------------------------------------------------- /** * Script processing data for confirmation dialog. * Used libraries: JQuery 3> and Bootstrap 3>. * * @param name unique component name at page scope * @param callback function which processing confirm click * @param actionBtnId button for open modal dialog * @param text localization data, structure: * > txtModalHeader - text at header of modal dialog * > txtModalBody - text at body of modal dialog * > txtBtnConfirm - text at button for confirm action * > txtBtnCancel - text at button for cancel action * * @constructor * @author Aleksey Nikitenko */ function ModalConfirmationComponent(name, callback, actionBtnId, text) { this.name = name; this.callback = callback; // Text data this.txtModalHeader = text.txtModalHeader; this.txtModalBody = text.txtModalBody; this.txtBtnConfirm = text.txtBtnConfirm; this.txtBtnCancel = text.txtBtnCancel; // Elements this.elmActionBtn = $('#' + actionBtnId); this.elmModalDiv = undefined; this.elmConfirmBtn = undefined; } /** * Initialize needed data for current component object. * Generate html code and assign actions for needed UI * elements. */ ModalConfirmationComponent.prototype.initialize = function () { // Generate modal html and assign with action button $('body').append(this.getHtmlModal()); this.elmActionBtn.attr('data-toggle', 'modal'); this.elmActionBtn.attr('data-target', '#'+this.getModalDivId()); // Initialize needed elements this.elmModalDiv = $('#'+this.getModalDivId()); this.elmConfirmBtn = $('#'+this.getConfirmBtnId()); // Assign click function for confirm button var object = this; this.elmConfirmBtn.click(function() { object.elmModalDiv.modal('toggle'); // hide modal object.callback(); // run callback function }); }; //---------------------------------------------------------------------------------------------------------------------- // HTML GENERATORS //---------------------------------------------------------------------------------------------------------------------- /** * Methods needed for get html code of modal div. * * @returns {ssortingng} html code */ ModalConfirmationComponent.prototype.getHtmlModal = function () { var result = '
'; }; //---------------------------------------------------------------------------------------------------------------------- // UTILITY //---------------------------------------------------------------------------------------------------------------------- /** * Get id element with name prefix for this component. * * @returns {ssortingng} element id */ ModalConfirmationComponent.prototype.getModalDivId = function () { return this.name + '-modal-id'; }; /** * Get id element with name prefix for this component. * * @returns {ssortingng} element id */ ModalConfirmationComponent.prototype.getConfirmBtnId = function () { return this.name + '-confirm-btn-id'; };

Quand il s’agit d’un projet important, nous pouvons avoir besoin de quelque chose de réutilisable . C’est quelque chose que je suis venu avec l’aide de SO.

confirmDelete.jsp

   

  

reusingPage.jsp

    <%@ include file="../some/path/confirmDelete.jsp" %> 

Remarque: cette méthode utilise la méthode de suppression HTTP pour la demande de suppression, vous pouvez la modifier à partir de JavaScript ou, vous pouvez l’envoyer en utilisant un atsortingbut de données tel que data-title ou data-url, etc.

Si vous voulez le faire dans le raccourci le plus facile, alors vous pouvez le faire avec ce plugin .


Mais ce plugin est une implémentation alternative utilisant Bootstrap Modal . Et l’implémentation réelle de Bootstrap est également très facile, donc je n’aime pas utiliser ce plugin car il ajoute un contenu JS excessif dans la page, ce qui ralentira le temps de chargement de la page.


Idée

J’aime le mettre en œuvre par moi-même –

  1. Si l’ utilisateur clique sur un bouton pour supprimer un élément de la liste, alors un appel JS mettra l’ ID d’article (ou toute autre donnée essentielle) sous une forme dans le modal.
  2. Ensuite, dans la fenêtre pop-up, il y aura 2 boutons pour confirmation.

    • Oui soumettra le formulaire (avec ajax ou formulaire de soumission directe)
    • Non va simplement rejeter le modal

Le code sera comme ça (en utilisant Bootstrap ) –

     

This is a item to delete.

POST Recette avec navigation vers la page cible et fichier lame réutilisable

La réponse de dfsq est très sympa. Je l’ai un peu modifié pour répondre à mes besoins: j’avais en fait besoin d’un modal pour le cas où, après avoir cliqué, l’utilisateur serait également dirigé vers la page correspondante. L’exécution asynchrone de la requête n’est pas toujours ce dont vous avez besoin.

En utilisant Blade j’ai créé le fichier resources/views/includes/confirmation_modal.blade.php :

   

Maintenant, l’utiliser est simple:

 Remove 

Pas beaucoup changé ici et le modal peut être inclus comme ceci:

 @include('includes.confirmation_modal', ['headerText' => 'Delete Data?', 'bodyText' => 'Do you really want to delete these data? This operation is irreversible.', 'confirmButtonText' => 'Remove Data', 'verb' => 'DELETE']) 

Juste en y mettant le verbe, il l’utilise. De cette façon, CSRF est également utilisé.

M’a aidé, peut-être que ça aide quelqu’un d’autre.