Develop Reference

How to create a click-function in a modal

Hey I am new to js and I was trying to open a bootstrap modal with a click on a button (I set the id to the value of the button because the id comes from a database) and if you click on "yes" in that modal a click function should be triggered which should then delete the selected row.
I am able to open the modal and setting the id also works but if I click the yes button in the modal there is no alert...
This is the modal located in content.html:
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
Please make sure you return the device.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
This is my JS located in main.js:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus');
});
$('#booked').click(function () {
$('#changestuff').load('content.html #booked', function () {
register();
change();
$('.ret').click(function () {
var id = $(this).val();
var tr = $(this).closest('tr');
})
returnOne(id, tr);
});
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
});
function returnOne(id, tr)
{
$('.delBtn').click(function () {
alert("you returned" +id);
})
}
Where is my error? I think it might be because the modal hasn't been loaded when I try to get the click event but I'm not sure. Thanks in advance!

click event handler is not attaching may be it is getting called before yes button dom get created.
Try below code where you can store row to be deleted in a variable and set row-id data attribute on Yes button. In click handler of Yes button, read the id and you can delete row from variable rowToDelete
$(document).ready(function(){
var rowToDelete;
$('#myModal').on('shown.bs.modal', function(){
$('#myInput').trigger('focus');
});
/*$('#changestuff').load('content.html #book', function(){
register();
change();
getChosenDevices();
});*/
$('#changestuff').on('load','content.html #book', function(){
register();
change();
getChosenDevices();
});
$('#booked').click(function() {
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on('click','.ret',function() {
var id = $(this).val();
$('#deleteModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
});
$(document).on("click", '#deleteModal button.delBtn', function(e) {
e.preventDefault();
var rowId = $(this).data('row-id');
alert("you returned" + rowId);
$('#deleteModal').modal('toggle');
});
});
JSFiddle Demo

Showing Bootstrap modal dialogs in sequence

I have a Bootstrap modal dialog, which when Yes is selected returns a resolved promise. Upon the promise being resolved, the modal should be displayed again. The line to display the modal is hit, but the modal does not display. What am I doing wrong?
$(function() {
showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes once!');
showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes twice!');
});
});
});
function showModalDialog(title, message, button1Caption, button2Caption) {
var deferred = $.Deferred();
$('#modalTitle').html(title);
$('#modalMessage').html(message);
$('#modalButton1').html(button1Caption);
$('#modalButton2').html(button2Caption);
$('#modalButton1').one('click', function() {
deferred.resolve();
});
$('#modalButton2').one('click', function() {
deferred.reject();
});
$('#modalDialog').one('hidden.bs.modal', function() {
//remove the handler for the button in case it was never invoked, otherwise it will
//still be there the next time the dialog is shown
$('#modalButton1').off('click');
deferred.reject();
})
$('#modalDialog').modal();
return deferred.promise();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" 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="modalTitle"></h4>
</div>
<div class="modal-body" id="modalMessage"></div>
<div class="modal-footer">
<button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
<button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
</div>
</div>
</div>
</div>

Blame the animations! :)
The animation of the hiding modal takes some finite time to complete. If you try to "show" the modal again during this time, it will not work. A simple workaround is to delay the "show" action slightly.
For example, delaying it by one second will work just fine:
setTimeout(function() {
showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes twice!');
});
}, 1000);
$(function() {
showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes once!');
setTimeout(function() {
showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes twice!');
});
}, 1000);
});
});
function showModalDialog(title, message, button1Caption, button2Caption) {
var deferred = $.Deferred();
$('#modalTitle').html(title);
$('#modalMessage').html(message);
$('#modalButton1').html(button1Caption);
$('#modalButton2').html(button2Caption);
$('#modalButton1').one('click', function() {
deferred.resolve();
});
$('#modalButton2').one('click', function() {
deferred.reject();
});
$('#modalDialog').one('hidden.bs.modal', function() {
//remove the handler for the button in case it was never invoked, otherwise it will
//still be there the next time the dialog is shown
$('#modalButton1').off('click');
deferred.reject();
})
$('#modalDialog').modal();
return deferred.promise();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" 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="modalTitle"></h4>
</div>
<div class="modal-body" id="modalMessage"></div>
<div class="modal-footer">
<button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
<button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
</div>
</div>
</div>
</div>
Note: I haven't checked the source code or experimented with these modals enough to know the minimum amount of delay required to make this work. But I don't mind a delay of one second anyway as it is barely noticeable.
Update
As you suggest, waiting for Bootstrap's hidden.bs.modal event is a better in this case. As described in the v3 Docs here:
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
So moving the promise.resolved to the event handler for hidden.bs.modal would also do the trick.
To do that, I've added a variable modalResult which keeps track of user's choice, and triggers deferred.resolve or deferred.reject accordingly.
$(function() {
showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes once!');
showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes twice!');
});
});
});
function showModalDialog(title, message, button1Caption, button2Caption) {
var modalResult = false;
var deferred = $.Deferred();
$('#modalTitle').html(title);
$('#modalMessage').html(message);
$('#modalButton1').html(button1Caption);
$('#modalButton2').html(button2Caption);
$('#modalButton1').one('click', function() {
// Wait for the modal to get hidden.
// deferred.resolve();
modalResult = true;
});
$('#modalButton2').one('click', function() {
// Wait for the modal to get hidden.
// deferred.reject();
modalResult = false;
});
$('#modalDialog').one('hidden.bs.modal', function() {
//remove the handler for the button in case it was never invoked, otherwise it will
//still be there the next time the dialog is shown
$('#modalButton1').off('click');
if(modalResult) {
deferred.resolve();
} else {
deferred.reject();
}
})
$('#modalDialog').modal();
return deferred.promise();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" 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="modalTitle"></h4>
</div>
<div class="modal-body" id="modalMessage"></div>
<div class="modal-footer">
<button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
<button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
</div>
</div>
</div>
</div>

Binding onclick to element calls the method in jquery

I have a modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div>Text</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Cancel</button>
<button id="btn-accept" type="button" data-dismiss="modal">Accept</button>
</div>
</div>
</div>
</div>
I show it from a function in javascript:
function foo(param1, param2){
$("#btn-accept").bind('click', bar(param1, param2)) ;
$("#myModal").modal('show');
}
When I do the binding to the #btn-accept it already calls the method. How can I avoid this?

Wrap it in a function like so:
function foo(param1, param2){
$("#btn-accept").bind('click', function() {
bar(param1, param2);
});
$("#myModal").modal('show');
}

I think you should bind event like this.
function foo(param1, param2){
$("#btn-accept").bind('click', function() {
bar(param1, param2);
});
$("#myModal").modal('show');
}

You can pass data to the event handler:
$( document ).on( 'click', '"#btn-accept"', {'param1' : 'abc', 'param2' : 'cde' }, bar);
Then in your function:
function bar( event ) {
alert( "param1 " + event.data.param1 );
}

Submit confirmation via Bootstrap Modal

I wanted to have a Submit Modal Confirmation But I have failed to do it correctly.
Here is my JS:
function warning(){
$('#ModalSubmitCart').modal('show');
var yes = document.getElementById('confirm').value;
if (yes == 'yes') {
return true;
}
else {
return false;
}
}
part of my modal:
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="confirm" value="yes">Yes</button>
</div>
my form
<form onSubmit="return warning()" method="POST" action="submitcart.php">
I wanted to have something like confirm() but in a Modal form.

There is no direct callback functions for the bootstrap modal.
I have done a slight hack here.
What I have done:
Added a class to both the buttons on the modal.
Attached a click callback handler for the buttons & verify by the textof the button whether a close button is or yes button .
JS Code:
$(function () {
$('#show').on('click', function () {
console.log('clicked');
warning();
});
$('.buttons').on('click', function () {
var yes = $(this).text();
if (yes === 'Yes') {
console.log('yes');
//return true;
} else {
console.log('close');
//return false;
}
});
});
function warning() {
$('#ModalSubmitCart').modal('show', function (data) {
console.log('data:' + data);
});
}
Live Demo # JSFiddle:http://jsfiddle.net/dreamweiver/wccqyzej/

You can wrap your modal in a FORM and use a submit button, as you're doing.
<form action="/echo/html/" method="POST" name="modalForm" id="modalForm">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content panel-warning">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">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="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
and use jQuery to intercept the submit event.
$('#modalForm').on('submit', function(e){
if (!confirm('are you sure?'))
{
e.preventDefault();
return false;
}
});
You can see how it works in this fiddle.

I think you should use this way your jquery code
function warning(){
$('#ModalSubmitCart').modal('show');
var yes = $('#confirm').attr("value");
if (yes == 'yes') {
return true;
}
else {
return false;
}
}

Function to append modal

I have 3 modals that all have the same format and are activated by different onclicks (Create Contact, Update Contact, Delete Contact). I am wanting the modal-title and modal-body to change depending on which button was clicked. How would I go about creating a function that appends the modal content depending on which button was clicked? Thank you for your help!
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Contact Created!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>

I have written the JavaScript "BootstrapModel" class for the same purpose.
It also depends on jQuery so don't forget to embed jQuery before using this class.
class is :
var BootstrapModal = (function (options) {
var defaults = {
modalId: "#confirmModal",
btnClose: "#btnClose",
title: "Confirm",
content: "Some bootstrap content",
onClose: function () {
},
onSave: function () {
}
};
defaults = options || defaults;
var $modalObj = $(defaults.modalId);
var hideModal = function () {
$modalObj.modal("hide");
};
var showModal = function () {
$modalObj.modal("show");
};
var updateModalTitle = function (title) {
defaults.title = title;
//$($modalObj).find(".modal-title").eq(0).html(title);
$modalObj.find(".modal-title").eq(0).html(title);
};
var updateModalBody = function (content) {
defaults.content = content;
$modalObj.find(".modal-body").eq(0).html(content);
};
return {
getDefaults: function () {
return defaults;
},
hide: function () {
hideModal();
},
show: function () {
showModal();
},
updateTitle: function (title) {
updateModalTitle(title);
return this;
},
updateBody: function (body) {
updateModalBody(body);
return this;
}
}
});
Usage :
var emailModal = new BootstrapModal({modalId: "#confirmModal"});
emailModal.updateTitle("Mail sent successfully").updateBody("<br/>This box will automatically close after 3 seconds.").show();
// Hide the Modal
emailModal.hide();
HTML Structure for the Modal:
<div class="modal fade" id="confirmModal" role="dialog" aria-labelledby="thankyouModal" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="padding-top: 225px">
<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="thankyouModal">Thank you</h4>
</div>
<div class="modal-body">
Thank you. We'll let you know once we are up.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The way I got around this is by loading the data in from external files. So you'd have your initial declaration of your modal box (just the surrounding div), and then in each file you have the containing code for the rest of the modal, then use a bit of jQuery to fire them off:
HTML (in main file)
<div class="modal" id="modal-results" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
JQuery
$('#create-contact').click(function(){
e.preventDefault();
$("#modal-results").html('create-contact.html');
$("#modal-results").modal('show');
});