I have a div in which there are 3 buttons. What I am expecting is that when I click the 3rd button, the 2nd and the 3rd buttons should fadeOut ... but in reality, only the 3rd button is fading out ... why so?
Here's, my code
<div id="bttns">
<button class="btn btn-danger"> Delete </button> //1st Button
<button class="btn btn-warning"> Modify </button> //2nd Button
<button class="btn btn-success"> Complete </button> //3rd Button
</div>
And here is the jQuery
$(".btn-success").on("click", function(){
$( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})
I couldn't find a question similar to mine ... and also I am new to all of this so if you do find that such a question exists, please redirect me to it.
This happens becuse:
$( $(this) , $(this).parent().children(".btn-warning") )
this is not a valid selector here. To chain multiple jQuery objects you can use .add() method and then call .fadeOut(500) on the collection like:
$(".btn-success").on("click", function() {
var $btn3 = $(this);
var $btn2 = $(this).parent().children(".btn-warning");
$btn2.add($btn3).fadeOut(500)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
<button class="btn btn-danger"> Delete </button>
<button class="btn btn-warning"> Modify </button>
<button class="btn btn-success"> Complete </button>
</div>
As you have assigned classes. You can go like this :-
$(".btn-success").on("click", function () {
$('.btn-warning, .btn-success').fadeOut(500);
})
you are fading out only the button with the btn-warning class. instead use two selectors.
$(".btn-success").on("click", function(){
$(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})
Demo
How can I associate an event to be fired only when an specific button (id) is clicked?
For example I have two buttons like:
<button class="btn btn-default" id="origin"> Origin</button>
<button class="btn btn-default" id="destination"> Destination</button>
Now I just want to fire the even view.on() only when the #origin is clicked:
view.on("click", function(event) {
event.stopPropagation();
console.log(event.mapPoint.latitude);
});
I already tried this:
view.on("click","#origin", function(event) {
event.stopPropagation();
console.log(event.mapPoint.latitude);
});
But it is not working.
Without a lot more details I suspect you want to check the target of the event something like:
view.on("click", function(event) {
if (event.target.id === 'origin'){
event.stopPropagation();
console.log(event.mapPoint.latitude);
}
});
Definition: I am creating a project that manages interns. Currently I am working at employee side; employees can add/edit/delete interns. These actions are handled by modal popups.
Approach: In the purpose of avoiding unnecessary code, I created a layout modal.
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3><span class="glyphicon glyphicon-pencil"></span>Intern</h3>
</div>
<div id="myModalContent"></div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal"> Cancel
</button>
</div>
</div>
As you see, layout has CANCEL button. Because every modal should have cancel button, so best approach is placing it to layout.
<div id="myModalContent"></div>
This myModalContent part is filled by a javascript/ajax code. Script is putting partial views to myModalContent. Also "Save Changes", "Delete Intern" etc.. buttons are coming from partial views.
Problem: But myModalContent is at another div, Cancel buttons are at another div. That causes a problem:
Edit Button code:
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right">
<span class="glyphicon glyphicon-floppy-disk"></span> Edit Intern
</button>
</div>
I want these buttons at same row. As far as I know (from my researchs) I cant access parent div with css/html.
Any help would be appreciated. Thanks
Edit:
Jquery code is here:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
location.reload();
}
}
});
return false;
});
You can get edit button from myModalContent and append it in modal-footer after loading partial view using below jquery
else {
$('#progress').hide();
$('#myModalContent').html(result);
//move button from modal content to footer
$('div.modal-footer').append($('#myModalContent button.btn.btn-default.pull-right'));
bindForm();
location.reload();
}
If you want, edit button before cancel button then use prepend() instead of append()
I have a list box in the bootstrap modal and a button.
When the button is clicked a new button gets rendered inside a div in the modal.
When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.
How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.
<!-- 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">
<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">
<div id="placeholder-div1"></div>
</div>
</div>
<div class="modal-footer">
<script>
$("#submit_form").on("click", function () {
$(".modal-body1").html("<h3>test</h3>");
});
</script>
<script>
$(function () {
$(".modal-footer").click(function () {
$(".modal").modal("hide");
});
});
</script>
</div>
</div>
</div>
</div>
-- Update ---
Why doesn't this work?
<script type="text/javascript">
$(function () {
$("#myModal").on("hidden.bs.modal", function (e) {
console.log("Modal hidden");
$("#placeholder-div1").html("");
});
});
</script>
Just reset any content manually when modal is hidden:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
There is more events. More about them here
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tried it and working well
$('#MyModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset');
})
reset is dom build-in funtion, you can also use $(this).find('form')[0].reset();
And Bootstrap's modal class exposes a few events for hooking into modal functionality, detail at here.
hide.bs.modal This event is fired immediately when the hide instance
method has been called.
hidden.bs.modal This event is fired when the modal has finished being
hidden from the user (will wait for CSS transitions to complete).
What helped for me, was to put the following line in the ready function:
$(document).ready(function()
{
..
...
// codes works on all bootstrap modal windows in application
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
...
..
});
When a modal window is closed and opened again, the previous entered and selected values, will be reset to the initial values.
I hope this will help you as well!
Try cloning, then removing and re-adding the element when the modal is hidden. This should keep all events, though I haven't thoroughly tested this with all versions of everything.
var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
$('#myModal').remove();
var myClone = originalModal.clone();
$('body').append(myClone);
});
To reset all the input fields in a modal use the following.
$(".modal-body input").val("")
Here's an alternative solution.
If you're doing a lot of changes to the DOM (add/removing elements and classes), there could be several things that need to be "reset." Rather than clearing each element when the modal closes, you could reset the entire modal everytime it's reopened.
Sample code:
(function(){
var template = null
$('.modal').on('show.bs.modal', function (event) {
if (template == null) {
template = $(this).html()
} else {
$(this).html(template)
}
// other initialization here, if you want to
})
})()
You can still write your initial state in HTML without worrying too much about what will happen to it later. You can write your UI JS code without worrying about having to clean up later. Each time the modal is relaunched it will be reset to the exact same state it was in the first time.
Edit: Here's a version that should handle multiple modals (I haven't tested it)...
(function(){
$('.modal').on('show.bs.modal', function (event) {
if (!$(this).data('template')) {
$(this).data('template', $(this).html())
} else {
$(this).html($this.data('template'))
}
// other initialization here, if you want to
})
})()
(function(){
$(".modal").on("hidden.bs.modal", function(){
$(this).removeData();
});
});
This is perfect solution to remove contact while hide/close bootstrap modal.
That's works for me accurately
let template = null;
$('.modal').on('show.bs.modal', function(event) {
template = $(this).html();
});
$('.modal').on('hidden.bs.modal', function(e) {
$(this).html(template);
});
also, you can clone your modal before open ;)
$('#myModal')
.clone()
.modal()
.on('hidden.bs.modal', function(e) {
$(this).remove();
});
Reset form elements ( Works with bootstrap 5 as well). Sample code :
$(document).on("hidden.bs.modal", "#modalid", function () {
$(this).find('#form')[0].reset();
});
you can try this
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
It will remove all the data from the model and reset it.
I am using BS 3.3.7 and i have a problem when i open a modal then close it, the modal contents keep on the client side no html("") no clear at all. So i used this to remove completely the code inside the modal div.
Well, you may ask why the padding-right code, in chrome for windows when open a modal from another modal and close this second modal the stays with a 17px padding right.
Hope it helps...
$(document)
.on('shown.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
$(document.body).css("padding-right", "0px");
$(this).removeData('bs.modal').find(".modal-dialog").empty();
})
Sample code:
$(document).on('hide.bs.modal', '#basicModal', function (e) {
$('#basicModal').empty();
});
The below statements show how to open/reopen Modal without using bootstrap.
Add two classes in css
And then use the below jQuery to reopen the modal if it is closed.
.hide_block
{
display:none !important;
}
.display_block
{
display:block !important;
}
$("#Modal").removeClass('hide_block');
$("#Modal").addClass('display_block');
$("Modal").show("slow");
It worked fine for me :)
Using BS 3.3.7
$("#yourModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null); // will clear all element inside modal
});
/* this will change the HTML content with the new HTML that you want to update in your modal without too many resets... */
var = ""; //HTML to be changed
$(".classbuttonClicked").click(function() {
$('#ModalDivToChange').html(var);
$('#myModal').modal('show');
});
Reset form inside the modal. Sample Code:
$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
$('#myModal form')[0].reset();
});
To reset/clear all input fields from bootstrap modal use the following code:
$(".modal-body input").val("")
To hide/close bootstrap modal use the following code:
$('#yourModalId').modal('hide');
Keep Coding 😎
Hi I'm using Bootstrap for the first time and I can't get my modal form to stay open on clicking the submit button.
I've searched SO but all related questions deal with slightly different issues (example below).
Disallow twitter bootstrap modal window from closing
Remove the following:
data-dismiss = "modal"
From the button that should not close the dialog. After that, you can close the dialog by using $( "#TheDialogID" ).modal( "hide" ). Example:
<!--<SimpleModalBox>-->
<div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true">
<!--<modal-dialog>-->
<div class = "modal-dialog">
<!--<modal-content>-->
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal">
<span aria-hidden="true">×</span>
</button>
<h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4>
</div>
<div id="TheBodyContent" class = "modal-body">
Put your content here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button>
<button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button>
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
</div>
</div>
<!--<modal-content>-->
</div>
<!--/modal-dialog>-->
</div>
<!--</SimpleModalBox>-->
Javascript code:
//#region Dialogs
function showSimpleDialog() {
$( "#SimpleModalBox" ).modal();
}
function doSomethingBeforeClosing() {
//Do something. For example, display a result:
$( "#TheBodyContent" ).text( "Operation completed successfully" );
//Close dialog in 3 seconds:
setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 );
}
//#endregion Dialogs
look at => http://getbootstrap.com/2.3.2/javascript.html#modals
use
data-backdrop="static"
or
$("#yourModal").modal({"backdrop": "static"});
Edit1 :
on your link opening your modal ==>
yourModal
Edit2 :
http://jsfiddle.net/BVmUL/39/
This is how I did in my program, hope it helps.
This is the button which triggers the modal. Here I have disabled the keyboard and mouse click outside the modal.
<button type="button" data-toggle="modal" data-target="#modalDivId"
data-backdrop="static" data-keyboard="false">
This is the modal div, with a form and a submit button. Replace ... with your modal content.
<div class="modal fade" id="modalDivId" role="dialog">
<form>
...
<button type="submit" onClick="myFunction()" class="btn btn-success">
Submit
</button>
</form>
</div>
Finally the function which triggers when you click submit button. Here event.preventDefault(); will prevent the default action of form submit, so that the modal will remain.
function myFunction() {
$("form").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "yoururl",
type: "POST",
data: yourData,
success: function (result) {
console.log(result)
}
});
})
}
If you want to add multiple data and you want modal to stay open use
<button type="button"></button>
and If you want to close the modal after submitting data you must use
<button type="submit"></button>
I ran into the similar problem where I use modal as a form so I cannot initially set data-backdrop="static" data-keyboard="false" because I want the user to be able to close it as long as he has not submitted the form. Once he has submitted the form, I want to prevent him from closing the form modal. Here is how I can get around.
$('#modalForm').on('submit', function() {
$(#modal).on('hide.bs.modal', function ( e ) {
e.preventDefault();
})
});
Use this to prevent bootstrap modal window from closing on form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
use below code only:-
$(document).ready(function () {
$("#myModal").modal('show');
});
and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you.