I'm trying to confirm deleting a row from datatable using bootstrap modal dialog
whenever a user clicked deleted link, bootstrap modal should be displayed to confirm the action.
here is my source code:
<c:forEach items="${equipes}" var="equ">
<tr>
<td><c:out value="${equ.idEquipe}"/></td>
<td class="center"><c:out value="${equ.designationEquipe}"/></td>
<td class="center">
<center>
<a class="btn btn-info" href="modifierEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
<i class="halflings-icon white edit"></i>
</a>
<!--
<a class="btn btn-danger" href="supprimerEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
<i class="halflings-icon white trash"></i>
</a>
<button type="button" data-target="#sup" class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i> </button>
-->
<a type="button" href="#sup?id=${equ.idEquipe}&nom=${equ.designationEquipe}" class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i></a>
</center>
</td>
</tr>
</c:forEach>
my purpose is to pass arguments to the bootstrap modal below to to use them if the user clicks the OK button of the modal:
<div class="modal hide fade" id="sup">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Suppression</h3>
</div>
<div class="modal-body">
<p>Voulez vous vraiment supprimer cet enregistrement ?</p>
</div>
<div class="modal-footer">
OK
Annuler
</div>
</div>
Please if I should use the javascript and jquery, I'm looking for the coorect code that can solves my problem.
Thank you.
In your loop:
<a type="button" href="#sup" class="btn btn-danger btn-lg modalOpener" data-toggle="modal" data-id="${equ.idEquipe}" data-nom="${equ.designationEquipe}"><i class="halflings-icon white trash"></i></a>
In your modal:
<a id="okbtn" href="supprimerEquipe" class="btn btn-primary">OK</a>
In your js:
$(".modalOpener").click(function(e) {
var _href = $("#okbtn").attr("href");
var params = "?id=" + $(this).data('id') + "&nom=" + $(this).data('nom');
$("#okbtn").attr("href", _href + params);
});
Demo: https://jsfiddle.net/curtisweeks/v10308hb/
Related
I have got the following code.
Here I need to pass the angular js variable, which is the id of repeating list.
Here the button is the deactivate button and on-click a confirmation box is shown. On confirm click, a function needs to run with the passing id.
But I am not able to send id long with data-target & data-toggle
In the code, I need to sent {{key.id}} to the confirmation box
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="deactivate(1)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>
Thanks in advance!
you need to set a variable for future use like
HTML
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button ng-click="selectedServiceId=key.id" type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="deactivate(selectedServiceId)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>
I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;
I have this HTML Bootstrap 3 code for modal window:
<!-- Modal DELETE-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Brisanje</h4>
</div>
<div class="modal-body">
Da li ste sigurni da zelite da obrisete ovu parcelu iz baze?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="brisi" class="btn btn-danger">Save changes</button>
</div>
</div>
</div>
</div>
I try to open this modal with code that is dinamicly created:
"targets": 8,
"data": "akcija",
"render": function(data, type, full, meta) {
// return data;
return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>';
}
so as you can see I add this: <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i> to DOM , but when I click I canT open modal...
What is the probem here?
It looks like you are trying to write the html to the DOM, but your question is unclear.
Using JQuery you would write the contents on the div to another container taht is already in the DOM like so:
<div id="container"></div>
You can the write the contents to the container with jquery:
$("#container").html('<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>');
I downloaded a web admin template with has a lot of HTML, JavaScript and CSS.
I am doing a JSP application and make a for statement, where the "delete" button opens a Modal which I copy pasted from the template
<% for(Group g:(List<Group>)request.getAttribute("data")){ %>
<tr>
<td>
<%=g.getName()%>
</td>
<td> <i class="fa fa-pencil"></i>
<div class="btn btn-xs btn-danger btn-flat" data-toggle="modal" data-target="sd"><i class="fa fa-times"></i>
</div>
</td>
<div id="uidemo-modals-alerts-danger" class="modal modal-alert modal-danger fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-times-circle"></i>
</div>
<div class="modal-title">Are you sure?</div>
<div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
<!-- / .modal-content -->
</div>
<!-- / .modal-dialog -->
</div>
<!-- / .modal -->
</tr>
<%} %>
The thing is that when the "Yes" of the modal is clicked it always shows id=1, because the div is repeated and the "Delete" button always go to the first div appearence.
How can I make the modal get the id without touching the CSS and JavaScript because this modal id has much javascript and css code related, and i dont want to change it because of feature template updates, and also i dont know how many divs im going to print
Im trying to test the sample modals for my project but even the codes from jfiddles is not working on me. When i clicked the button, it only gives me a dimmed window. I also tried to google this but gives me nothing
This is the modal code im trying.
<body>
<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>
<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ckeditor.js"></script>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
Thanks for your help.
Demo
You are missing the data-target to display.
<a data-target="#myModal" data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal">test</a>
<div id="myModal" role="dialog">
....
</div>
Taken from Bootstrap's demo
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
The modal is targeted via the data-target attribute and not href like you have here.