jquery - Confirm delete modal/dialog with Twitter bootstrap not working -
a viewcomponent in asp.net core 1.1 project on vs2015 has confirm delete modal/dialog twitter bootstrap shown below. when user clicks on delete button confirm delete not trigger jquery function shown below. modal/dialog pops fine when click on delete button id= deletebtnid inside modal/dialog expect popup `alert('test') not happening. question: may missing? no errors shown in chrome's developer tool.
view calls viewcomponent:
@model myproj.models.testmodel html .... .... <div id="deletebtnparentid"> @await component.invokeasync("testvc") </div> viewcomponent:
@model ienumerable<myproj.models.testmodel> <table> @foreach (var item in model) { <tr> <td> <a asp-action="testaction">@item.title</a> </td> <td> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal">delete</button> <!-- modal --> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- modal content--> <div class="modal-content"> <div class="modal-header btn-warning" style="font-weight:bold;color:white;"> <button type="button" class="close" data-dismiss="modal">×</button> <h5 class="modal-title modal-sm">delete warning</h5> </div> <div class="modal-body"> <p>click 'delete' <strong>parmenently</strong> delete record. click 'cancel' cancel action.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="deletebtnid" value="@item.id" data-dismiss="modal">delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> </div> </div> </div> </div> </td> </tr> } </table> @section scripts { <script> $(document).ready(function () { $('#deletebtnparentid').on('click', '#deletebtnid', function (event) { alert('test'); }); }); </script> } snapshot of page source when use chrome's developer toot [you can click on image larger view]:
answer update
from comment:
being outside table cause modal's delete button not recognize attribute value @item.id of since item variable used in foreach loop.
a way solve point can be:
- attach value attribute button , no more modal confirm button
- on modal show event (i.e.: show.bs.modal) attribute button , save modal confirm button
- use attribute when clicking on confirmation button
updated snippet:
$('#deletebtnid').on('click', function (event) { console.log('test: ' + $(this).attr('value')); }); $('#mymodal').on('show.bs.modal', function (e) { var btnvalue = $(e.relatedtarget).attr('value'); $('#deletebtnid').attr('value', btnvalue); })<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal" value="@item.id1">delete1</button> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal" value="@item.id2">delete2</button> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal" value="@item.id3">delete3</button> <!-- modal --> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- modal content--> <div class="modal-content"> <div class="modal-header btn-warning" style="font-weight:bold;color:white;"> <button type="button" class="close" data-dismiss="modal">×</button> <h5 class="modal-title modal-sm">delete warning</h5> </div> <div class="modal-body"> <p>click 'delete' <strong>parmenently</strong> delete record. click 'cancel' cancel action.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="deletebtnid" data-dismiss="modal">delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> </div> </div> </div> </div>from code:
@foreach (var item in model)
the ids must unique. so, suggest insert in each table cell button , move outside modal, i.e.:
<!-- modal --> <div id="mymodal" class="modal fade" role="dialog"> .......... </div> so, event attached unique modal button.
the snippet:
// // if need delegate.... // $(document).on('click', '#deletebtnid', function (event) { console.log('delegated test'); }); $('#deletebtnid').on('click', function (event) { console.log('test'); });<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal">delete1</button> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal">delete2</button> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#mymodal">delete3</button> <!-- modal --> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- modal content--> <div class="modal-content"> <div class="modal-header btn-warning" style="font-weight:bold;color:white;"> <button type="button" class="close" data-dismiss="modal">×</button> <h5 class="modal-title modal-sm">delete warning</h5> </div> <div class="modal-body"> <p>click 'delete' <strong>parmenently</strong> delete record. click 'cancel' cancel action.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="deletebtnid" value="@item.id" data-dismiss="modal">delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> </div> </div> </div> </div>
Comments
Post a Comment