jquery - Verwijdering bevestigen in modaal/dialoogvenster met Twitter Bootstrap?

Ik heb een HTML-tabel met rijen die zijn gekoppeld aan databaserijen. Ik wil graag een “verwijder rij”-link voor elke rij, maar ik wil dit vooraf met de gebruiker bevestigen.

Is er een manier om dit te doen met behulp van het Twitter Bootstrap modale dialoogvenster?

Antwoord 1, autoriteit 100%

Ontvang recept

Voor deze taak kunt u reeds beschikbare plug-ins en bootstrap-extensies gebruiken. Of u kunt uw eigen bevestigingspop-up maken met slechts 3regels code. Bekijk het.

Stel dat we deze links hebben (let op data-hrefin plaats van href) of knoppen waarvan we een verwijderingsbevestiging willen hebben voor:

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>
<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
    Delete record #54
</button>

Hier verwijst #confirm-deletenaar een modale pop-up div in je HTML. Het zou een “OK”-knop moeten hebben die als volgt is geconfigureerd:

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>

Nu hebt u dit kleine JavaScript alleen nodig om een deleteactie te maken die bevestigd is:

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

Dus op show.bs.modalgebeurtenis Delete knop hrefis ingesteld op URL met bijbehorende record-ID.

Demo: http://plnkr.co/edit/nepr0bqf3vmktummhvr7 ? P = Voorbeeld

Post Recept

Ik realiseer me dat er in sommige gevallen nodig is om post- of verwijder verzoek eerder dan te krijgen. Het is nog steeds vrij eenvoudig zonder te veel code. Bekijk de demo hieronder met deze aanpak:

// 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);
});

Antwoord 2, Autoriteit 39%

http://bootboxjs.com/ – laatste werken met bootstrap 3.0.0

Het eenvoudigst mogelijke voorbeeld:

bootbox.alert("Hello world!");

Van de site:

De bibliotheek onthult drie methoden die zijn ontworpen om hun native JavaScript-equivalenten na te bootsen. Hun exacte methodehandtekeningen zijn flexibel, omdat ze verschillende parameters kunnen gebruiken om labels aan te passen en standaardinstellingen op te geven, maar ze worden meestal zo genoemd:

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

Hier is een fragment ervan in actie (klik hieronder op ‘Codefragment uitvoeren’):

$(function() {
  bootbox.alert("Hello world!");
});

<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

Antwoord 3, autoriteit 7%

 // ---------------------------------------------------------- Generic Confirm  
  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {
    var confirmModal = 
      $('<div class="modal hide fade">' +    
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +
          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +
          '<div class="modal-footer">' +
            '<a href="#" class="btn" data-dismiss="modal">' + 
              cancelButtonTxt + 
            '</a>' +
            '<a href="#" id="okButton" class="btn btn-primary">' + 
              okButtonTxt + 
            '</a>' +
          '</div>' +
        '</div>');
    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);
  });

Antwoord 4, Autoriteit 7%

Ik zou het een heel oude vraag beseffen, maar sinds ik me vandaag heb me afgevraagd voor een efficiëntere methode om de Bootstrap-modals te verwerken. Ik deed wat onderzoek en vond iets beters, dan de oplossingen die hierboven zijn getoond, die op deze link te vinden zijn:

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

Laad eerst de jQuery

$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

Stel dan een vraag/bevestiging aan href:

<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>

Op deze manier is de bevestigingsmodal een stuk universeler en kan deze dus gemakkelijk opnieuw worden gebruikt op andere delen van uw website.

Antwoord 5, autoriteit 4%

Dankzij de oplossingvan @Jousby heb ik de mijne ook werkend gekregen, maar ik moest zijn oplossing verbeteren Bootstrap modale opmaak een beetje om het correct weer te geven, zoals gedemonstreerd in de officiële voorbeelden.

Dus hier is mijn aangepaste versie van de generieke functie confirmdie prima werkte:

/* Generic Confirm func */
  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {
    var confirmModal = 
      $('<div class="modal fade">' +        
          '<div class="modal-dialog">' +
          '<div class="modal-content">' +
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +
          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +
          '<div class="modal-footer">' +
            '<a href="#!" class="btn" data-dismiss="modal">' + 
              cancelButtonTxt + 
            '</a>' +
            '<a href="#!" id="okButton" class="btn btn-primary">' + 
              okButtonTxt + 
            '</a>' +
          '</div>' +
          '</div>' +
          '</div>' +
        '</div>');
    confirmModal.find('#okButton').click(function(event) {
      callback();
      confirmModal.modal('hide');
    }); 
    confirmModal.modal('show');    
  };  
/* END Generic Confirm func */

Antwoord 6, autoriteit 2%

Ik vond dit nuttig en gemakkelijk te gebruiken, en het ziet er ook mooi uit: http://maxailloud.github .io/confirm-bootstrap/.

Om het te gebruiken, voegt u het .js-bestand toe aan uw pagina en voert u het volgende uit:

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

Er zijn verschillende opties die je erop kunt toepassen, om het er beter uit te laten zien als je het doet om een verwijdering te bevestigen, gebruik ik:

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

Antwoord 7

Ik kan dit soort taken gemakkelijk aan met de bootbox.js-bibliotheek. Eerst moet u het bootbox JS-bestand opnemen. Schrijf vervolgens in uw gebeurtenishandlerfunctie gewoon de volgende code:

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

Officiële bootboxjs site

Antwoord 8

Volgende oplossing is beter dan bootbox.js, omdat

Het kan alles wat bootbox.js kan;
De gebruikssyntaxis is eenvoudiger
Hiermee kun je op elegante wijze de kleur van je bericht bepalen met behulp van “error”, “warning” of “info”
Bootbox is 986 regels lang, de mijne slechts 110 regels

digimango.messagebox.js:

const dialogTemplate = '\
    <div class ="modal" id="digimango_messageBox" role="dialog">\
        <div class ="modal-dialog">\
            <div class ="modal-content">\
                <div class ="modal-body">\
                    <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\
                    <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\
                </div>\
                <div class ="modal-footer">\
                    <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\
                    <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\
                </div>\
            </div>\
        </div>\
    </div>';
// 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');
}

Antwoord 9

Als het om een relevant groot project gaat, hebben we misschien iets herbruikbaarsnodig. Dit is iets waar ik mee kwam met de hulp van SO.

bevestigenDelete.jsp

<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
 aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h4 class="modal-title">Delete Parmanently</h4>
        </div>
        <div class="modal-body" style="height: 75px">
            <p>Are you sure about this ?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger" id="confirm-delete-ok">Ok
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var url_for_deletion = "#";
    var success_redirect = window.location.href;
$('#confirmDelete').on('show.bs.modal', function (e) {
    var message = $(e.relatedTarget).attr('data-message');
    $(this).find('.modal-body p').text(message);
    var title = $(e.relatedTarget).attr('data-title');
    $(this).find('.modal-title').text(title);
    if (typeof  $(e.relatedTarget).attr('data-url') != 'undefined') {
        url_for_deletion = $(e.relatedTarget).attr('data-url');
    }
    if (typeof  $(e.relatedTarget).attr('data-success-url') != 'undefined') {
        success_redirect = $(e.relatedTarget).attr('data-success-url');
    }
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
    $.ajax({
        method: "delete",
        url: url_for_deletion,
    }).success(function (data) {
        window.location.href = success_redirect;
    }).fail(function (error) {
        console.log(error);
    });
    $('#confirmDelete').modal('hide');
    return false;
});
<script/>

Page.jsp hergebruiken

<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>

Opmerking:dit gebruikt de http-verwijdermethode voor verwijderingsverzoeken, u kunt het wijzigen vanuit javascript of u kunt het verzenden met een gegevenskenmerk zoals in gegevenstitel of gegevens-url enz., voor ondersteuning elk verzoek.

Antwoord 10

Als je het in de gemakkelijkste snelkoppeling wilt doen, dan kun je het doen met deze plug-in.

Maar deze plug-in is een alternatieve implementatie die Bootstrap Modalgebruikt. En echte Bootstrap-implementatie is ook heel eenvoudig, dus ik gebruik deze plug-in niet graag omdat het overtollige JS-inhoud aan de pagina toevoegt, wat de laadtijd van de pagina vertraagt.

Idee

Ik vind het leuk om het op deze manier zelf te implementeren-

Als gebruikerop een knop klikt om een item uit de lijst te verwijderen, dan zal een JS-aanroep Item-ID(of meer essentiële gegevens) in een formulier plaatsen in het modaal.
In de pop-up zijn er dan 2 knoppen voor bevestiging.
- Jazal het formulier verzenden (met ajax of directe formulierverzending)
- Neesluit de modal gewoon af

De code ziet er zo uit (met behulp van Bootstrap)-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
{
    $("button").click(function()
    {
        //Say - $('p').get(0).id - this delete item id
        $("#delete_item_id").val( $('p').get(0).id );
        $('#delete_confirmation_modal').modal('show');
    });
});
</script>
<p id="1">This is a item to delete.</p>
<button type="button" class="btn btn-danger">Delete</button>
<!-- Delete Modal content-->
<div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;">
	<div class="modal-dialog" style="margin-top: 260.5px;">
				<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title">Do you really want to delete this Category?</h4>
			</div>
			<form role="form" method="post" action="category_delete" id="delete_data">
				<input type="hidden" id="delete_item_id" name="id" value="12">
				<div class="modal-footer">
					<button type="submit" class="btn btn-danger">Yes</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
				</div>
			</form>
		</div>
	</div>
</div>

Antwoord 11

Je kunt mijn oplossing meer herbruikbaar proberen met de callback-functie. In deze functie kunt u een POST-verzoek of een andere logica gebruiken.
Gebruikte bibliotheken: JQuery 3>en Bootstrap 3>.

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

Html-code voor test:

...
<body>
    <a href='#' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...

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 {string} html code
 */
ModalConfirmationComponent.prototype.getHtmlModal = function () {
    var result = '<div class="modal fade" id="' + this.getModalDivId() + '"';
    result +=' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
    result += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
    result += this.txtModalHeader + '</div><div class="modal-body">' + this.txtModalBody + '</div>';
    result += '<div class="modal-footer">';
    result += '<button type="button" class="btn btn-default" data-dismiss="modal">';
    result += this.txtBtnCancel + '</button>';
    result += '<button id="'+this.getConfirmBtnId()+'" type="button" class="btn btn-danger">';
    result += this.txtBtnConfirm + '</button>';
    return result+'</div></div></div></div>';
};
//----------------------------------------------------------------------------------------------------------------------
// UTILITY
//----------------------------------------------------------------------------------------------------------------------
/**
 * Get id element with name prefix for this component.
 *
 * @returns {string} element id
 */
ModalConfirmationComponent.prototype.getModalDivId = function () {
    return this.name + '-modal-id';
};
/**
 * Get id element with name prefix for this component.
 *
 * @returns {string} element id
 */
ModalConfirmationComponent.prototype.getConfirmBtnId = function () {
    return this.name + '-confirm-btn-id';
};

Antwoord 12

POST-recept met navigatie naar doelpagina en herbruikbaar Blade-bestand

dfsq’s antwoord is erg aardig. Ik heb het een beetje aangepast aan mijn behoeften: ik had eigenlijk een modal nodig voor het geval dat de gebruiker na het klikken ook naar de bijbehorende pagina zou worden genavigeerd. Het asynchroon uitvoeren van de query is niet altijd wat men nodig heeft.

Met Bladeheb ik het bestand resources/views/includes/confirmation_modal.blade.phpgemaakt:

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{ $headerText }}</h4>
            </div>
            <div class="modal-body">
                {{ $bodyText }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <form action="" method="POST" style="display:inline">
                    {{ method_field($verb) }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger btn-ok" value="{{ $confirmButtonText }}" />
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $('#confirmation-modal').on('show.bs.modal', function(e) {
        href = $(e.relatedTarget).data('href');
        // change href of button to corresponding target
        $(this).find('form').attr('action', href);
    });
</script>

Nu is het gebruik ervan eenvoudig:

<a data-href="{{ route('data.destroy', ['id' => $data->id]) }}" data-toggle="modal" data-target="#confirmation-modal" class="btn btn-sm btn-danger">Remove</a>

Hier is niet veel veranderd en de modal kan als volgt worden toegevoegd:

@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'])

Gewoon door het werkwoord erin te zetten, wordt het gebruikt. Op deze manier wordt ook CSRF gebruikt.

Heeft mij geholpen, misschien helpt het iemand anders.

Previous articleKan het gevraagde adres niet toewijzen met ServerSocket.socketBind

Next articleHoe centreer ik de inhoud van een HTML-tabel?

Verwijdering bevestigen in modaal/dialoogvenster met Twitter Bootstrap?

Antwoord 1, autoriteit 100%

Ontvang recept

Post Recept

Antwoord 2, Autoriteit 39%

Antwoord 3, autoriteit 7%

Antwoord 4, Autoriteit 7%

Antwoord 5, autoriteit 4%

Antwoord 6, autoriteit 2%

Antwoord 7

Antwoord 8

Antwoord 9

bevestigenDelete.jsp

Page.jsp hergebruiken

Antwoord 10

Idee

Antwoord 11

Antwoord 12

POST-recept met navigatie naar doelpagina en herbruikbaar Blade-bestand

Other episodes

Hoe jQuery-ondersteuning in Aptana Studio 3 in te schakelen

SCRIPT5009: ‘URLSearchParams’ is niet gedefinieerd in IE 11

jQuery-callback voor meerdere ajax-oproepen

jQuery krijgt muispositie binnen een element

jQuery Scroll naar de onderkant van de pagina

jQuery detecteert of tekstgebied leeg is

Kan ik jQuery UI 1.12.1 gebruiken met jQuery 3.x?