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 );
}
Related
I have a presentation with user notes. The button processing works for me, a modal window appears. Now I need to set its title and body when downloading. I get the body from the parent class of the button, no problem with that.
Here is my code:
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').modal('show');
$('#exampleModalLongTitle').val('123'); // not work
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="~/js/showTittleTodo.js"></script>
How can i set values in js file exampleModalLongTitle and modalBody
You try below which is not work.
$('#exampleModalLongTitle').val('123');// not work
Please replace below instead of that
$('#exampleModalLongTitle').text('123');
Try to set html or text instead val.
$('#exampleModalLongTitle').html('123');
try with this code:
$('#exampleModalCenter').modal('show');
$('#exampleModalCenter').on('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})
Update your js as following, using shown.bs.modal event on modal element you can attach a callback which fires when the modal window is completely shown
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').one('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})
$('#exampleModalCenter').modal('show');
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});
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;
}
}
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');
});
I have bootstrap 3.3.1 in my gemfile. Did bundle install.
I have the following in my view
<div class="row text-center">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<button type="button" class="btn mybtn-primary" data-toggle="modal" data-target="#myModal">
Start Practice Group
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>
<h4 class="modal-title" id="myModalLabel">Select Language</h4>
</div>
<div class="modal-body">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="submit_form">Submit</button>
<!--<div class='modal-body1'>-->
<!-- <h3>Close and open, I will be gone!</h3>-->
<!--</div>-->
</div>
<div class="modal-body2">
<div id="placeholder-div1">
</div>
</div>
<div class="modal-footer">
</div>
<script type="text/javascript">
var render_button = function() {
var data = $('#lang').val() + " " + $('#level').val();
console.log(data);
gapi.hangout.render('placeholder-div1', {
'render': 'createhangout',
'initial_apps': [{'app_id' : '1097853', 'start_data' : $('#lang').val() + " " + $('#level').val(), 'app_type' : 'ROOM_APP' }]
});
}
$(function(){
$('#submit_form').click(function(){
console.log("Submitted");
render_button();
});
});
// $(function(){
// $('#myModal').on('hidden.bs.modal', function (e) {
// console.log("Modal hidden");
// $("#placeholder-div1").html(" ");
// });
// });
$(document).ready(function() {
console.log("Document Loaded");
$('#myModal').on("hidden.bs.modal", function() {
console.log("Modal hidden");
$(".modal-body1").html("Where did he go?!?!?!");
});
});
$(document).ready(function() {
$('#myModal').on('hidden.bs.modal', function () {
alert('hidden event fired!');
});
$('#myModal').on('shown.bs.modal', function () {
alert('show event fired!');
});
});
</script>
</div>
</div>
</div>
</div>
The modal shows and closes perfectly.
But the following is not getting triggered.
$('#myModal').on("hidden.bs.modal", function() {
console.log("Modal hidden");
$(".modal-body1").html("Where did he go?!?!?!");
});
and also
alert('hidden event fired!');
alert('show event fired!');
You need to bind those events to the show handler. In other words change this:
$('#myModal').on("hidden.bs.modal", function() {
console.log("Modal hidden");
$(".modal-body1").html("Where did he go?!?!?!");
});
to
$('#myModal').on("hidden.bs.modal", function() {
console.log("Modal hidden");
$(".modal-body1").html("Where did he go?!?!?!");
}).modal('show');
I have problem when create custom JQuery plugin that will show Bootstrap modal dialog. The custom plugin require callback function as it's parameter.
The problem are when modal dialog called twice, callback also called twice, and so on.
Here the code:
HTML
test modal
<div class="modal fade" id="general_modal" tabindex="-1" role="dialog" aria-labelledby="general_modalLabel" 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="general_modal_title">Set Title Here</h4>
</div>
<div class="modal-body">set modal content here</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary action_button">Save changes</button>
</div>
</div>
</div>
Javascript
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').modal();
$('#general_modal .action_button').on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
DEMO: http://jsfiddle.net/kJn47/2/
You are rebinding the modal and click events each time showDialog is run. Here's how you might prevent the events being re-attached each time:
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').unbind().modal();
$('#general_modal .action_button').unbind().on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
You can call one() against on():
$('#general_modal .action_button').unbind().one('click', function () {
According to documentation:
The .one() method is identical to .on(), except that the handler for a
given element and event type is unbound after its first invocation.
For example:
http://jsfiddle.net/kJn47/47/