I'm looking to invoke an ajax function after clicking an option from a bootstrap confirmation modal. the confirmation modal will be open through function remove(parameter)
Any help will be appreciated
function remove(parameter){
// $("#remove-modal").modal('show');
/*
if( modal clicked Yes){
..perform ajax call using 'parameter'
}
*/
}
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Do you want to remove this item?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
You could just add an event listener for the yes button.
As the event varies every time the modal is shown you remove it before adding the new one.
remove(parameter) {
var yesButton = $("#modal-button-si");
yesButton.off("click");
yesButton.click(function(){
//perform ajax here
});
}
I would assume adding a click handler to the "Yes" button, after the modal is shown, should work. Something like:
function remove(parameter){
// show the dialog
var m = $("#remove-modal").modal('show');
// find the button in your modal, and attach an event
// handler to it's click event
m.on('shown.bs.modal', function(){
m.find('#modal-btn-si').on('click', function(e){
// do something here...
// When you're ready to dismiss the modal, call:
//
// m.modal('hide');
//
// Make sure this is in the callback for your
// AJAX event, unless you want the modal dismissed
// as soon as the button is clicked
});
});
}
Related
I've a Modal which I show for confirmation:
<div class="modal" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
... Body ...
<div class="modal-footer">
<button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Here is the code for showing the above Modal..
var M = {
confirm: function(body, yes, no) {
$('#btnCancel').on('click', function() {
$('#btnCancel').off();
$('#confirm-modal').modal('hide');
if (no) {
return no();
}
});
$('#btnOk').on('click', function() {
$('#btnOk').off();
$('#modal').modal('hide');
if (yes) {
return yes();
}
});
}
}
And here is how I am using it... (In any view for example)
M.confirm("Body", function(){
// Function Body
})
Now, the problem is: If I call confirm, it shows the Modal. But if I click Cancel and than again call confirm and this time, I hit OK: the function (second param in the snippet above) is called twice. If I hit cancel 10 times, the function above is called 10 times.
Any idea why this is happening?
Thank You.
Every time you call confirm you add an event handler to each of btnCancel and btnOk.
However, you only remove the effect handler on one of those buttons when that button is clicked.
So if you call confirm, then click btnCancel, then call confirm you'll have two event handlers on btnOK: One from the first call to confirm and once from the second.
When either button is clicked you need to remove both event handlers.
… or just add the event handlers when the document is loaded and don't touch them thereafter.
I have a modal with two buttons. One is a yes button and one is a no button. If yes button is pressed, I would like the remainder of the function to execute. If no btn clicked, I would like the page to prevent default and not execute. However, it seems that regardless of which button is clicked, nothing happens besides the modal closing. I am using a modal example I found elsewhere, so this may be the issue. After glancing at it for some time I cannot seem to find where the issue is. Am I missing something small? Or perhaps my Jquery is wrong? Below is my code:
Modal:
<!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body bg-light">
<div id="del" class="center">
<label>Are you sure you want to delete?</label>
</div>
</div>
<div class="modal-footer">
<div id="deleteYes">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
</div>
<div id="deleteNo">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
</div>
</div>
</div>
</div>
</div>
And here is my Jquery:
$(".btnDeleteTerminalCommand").click(function (e) {
$("#deleteModal").modal('toggle');
if ($("#deleteNo").click) {
return e.preventDefault();
}
var rowId = "#" + $(this).data("rowindex");
var row = $(rowId);
var termId = row.find(".tdTermId").html().trim();
var cmdId = row.find(".tdCmdId").html().trim();
var cmdVal = row.find(".tdCmdVal").html().trim();
var cmdID = row.find(".cmdID").html().trim();
var data = {
TerminalID: termId,
CommandID: cmdId,
CommandValue: cmdVal,
ID: cmdID
};
$.ajax({
url: '#Url.Action("DeleteTerminalCommand", "TerminalCommand")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
Any advice helps! Thank you!
Your click handler will toggle the modal and immediately continue to execute the rest of the function before the user can click anything. If your modal has two buttons, create a click handler for each button. Perhaps the No button just closes the modal. The Yes button handler can execute the actions required to accomplish the task.
$(".btnDeleteTerminalCommand").click(function(e){
$("#deleteModal").modal('toggle');
}
$("#deleteNo").click(function(e){
$("#deleteModal").modal('hide');
}
$("#deleteYes").click(function(e){
// build data object
// ajax post
}
I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to myRemoteURL.do to load the model body.
Code:
<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>
<!-- Model -->
<div class="modal fade" id="myModel" 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-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Model Title</h3>
</div>
<div class="modal-body">
<p>
<img alt="loading" src="resources/img/ajax-loader.gif">
</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">Submit</button>
</div>
</div>
</div>
</div>
Found the problem: They have removed the remote option in bootstrap 4
remote : This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
I used JQuery to implement this removed feature.
$('body').on('click', '[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
});
According to official documentation, we can do the follow(https://getbootstrap.com/docs/4.1/components/modal):
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
So, I believe this is the best approach (works for BS 5 too):
<!-- Button trigger modal -->
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="/otherpage/goes-here">link</a>
<!-- Modal -->
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Completes the modal component here -->
</div>
<script>
$('#modal_frame').on('show.bs.modal', function (e) {
$(this).find('.modal-body').load(e.relatedTarget.href);
});
</script>
e.relatedTarget is the anchor() that triggers the modal.
Adapt to your needs
As some of the other answers and Bootstrap docs indicate, Bootstrap 4 requires handling the show.bs.modal event to load content into the modal. This can be used to either load content from an HTML string, or from a remote url. Here's a working example...
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
// load content from HTML string
//modal.find('.modal-body').html("Nice modal body baby...");
// or, load content from value of data-remote url
modal.find('.modal-body').load(button.data("remote"));
});
Bootstrap 4 Remote URL Demo
Another option is to open the modal once data is returned from an Ajax call...
$.ajax({
url: "http://someapiurl",
dataType: 'json',
success: function(res) {
// get the ajax response data
var data = res.body;
// update modal content
$('.modal-body').text(data.someval);
// show modal
$('#myModal').modal('show');
},
error:function(request, status, error) {
console.log("ajax call went wrong:" + request.responseText);
}
});
Bootstrap 4 Load Modal from Ajax Demo
In Asp.NET MVC, this works for me
html
Edit item
<div class="modal" id="modalPartialView" />
jquery
<script type="text/javascript">
function Edit(id)
{
$.ajax({
url: "#Url.Action("ActionName","ControllerName")",
type: 'GET',
cache: false,
data: {id: id},
}).done(function(result){
$('#modalPartialView').html(result)
$('#modalPartialView').modal('show') //part of bootstrap.min.js
});
}
<script>
Action
public PartialViewResult ActionName(int id)
{
// var model = ...
return PartialView("_Modal", model);
}
If you use the Jquery slim version (as in all the Bootstrap 4 docs and examples) the load function will fail
You need to use the full version of Jquery
This process is loading the current dynamic. data remote = "remoteContent.html"
<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
Launch Modal
</a>
This trick : data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have this modal
<form id="contactModal">
<div id="mymodal2" class="" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Contact</span>
</div>
<div class="modal-body">
What I want is to clear modal every time its closed so I wrote a script like this:
function clear() {
$("#txtNombreCompleto").val("");
$("#txtNombreEmpresa").val("");
$("#exampleInputEmail2").val("");
$("#dropOficina").val("");
$("#txtTelefono").val("");
$("#txtMensaje").val("");
}
$('#mymodal').on('hidden', function(){
$.clear(this)
});
So my inputs inside the modal are something like this:
<input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre completo">
But when I close the modal, it doesn´t run the function, how can I run the function when the modal closes? Regards
Simply call clear(); inside bootstrap modal hide.bs.modal event(or hidden.bs.modal) handler or set the function as callback. Also put your code inside document ready handler for attaching event handler after loading the page.
$(document).ready(function() {
$('#mymodal').on('hidden', function() {
clear()
});
});
or get all form all elements inside modal and set value
$(document).ready(function() {
$('#mymodal').on('hidden', function() {
$(':input', this).val('');
});
});
I tried this code in my project but it didn't work. So I tried this new code
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
});
$('.btnLogMesaj').click(function () { // your button is clicked
$('div#demo').empty(); // clear the "div" of the id "demo"
*
*
*
});
<div class="modal-body">
<div id="demo">
<h4>... Merve's contents </h4>
</div>
</div>
Main page contains the google map(div), after selecting state from map, i will try to open bootstrap modal and load the selected county map inside the bootstrap.
Firsttime click Texas state(javascript ShowModalDialog() called) then bootstrap modal alert shows Texas then close.
Second time Ohio is selected, now first alert showing Texas then Ohio.
Why the previous state is showing here?
<script type="text/javascript">
function ShowModalDialog(stateid) {
$('#myModal').modal('show').on('shown.bs.modal', function () {
alert(stateid);
$("#myModal #myModalLabel").html(document.getElementById("statename").value);
var datajson = GetCountyData(stateid);
});
}
</script>
<!-- Modal -->
<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="color: #808080">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
....
....
..
.
</div>
</div>
</div>
</div>
I think this is bug in bootstrap, because i have several ways to clear modal
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
But stil got no 'perfect' solutin, becasue with every new call, modal on screen goes a little down, than in firebug i saw there is a lots of modal there just hidden, than i found
http://bootboxjs.com/
And all my problem were solved
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});