We Keep Coding

Bootstrap modal not closing second time from JS code

I have following code in a Partial View in an MVC project:
$(document).ready(function () {
$("##Html.IdFor(m => m.AanwezigheidChauffeurID)").change(function () {
setModalBody("busy", "Even geduld, de gegevens worden opgehaald...");
$("#modalDialog").modal({ keyboard: false, backdrop: "static" });
var chauffeurRequest = $.ajax({
url: '#Url.Action("GetAanwezigheid", "Invoer")',
data: { id: $("##Html.IdFor(m => m.AanwezigheidChauffeurID)").val() },
async: true,
cache: false,
type: "POST"
});
chauffeurRequest.done(function (data, textStatus, jqXHR) {
$("#entriesDiv").empty();
$("#entriesDiv").append(data);
$(".hoursInput:first").trigger("change");
$("#modalDialog").modal("hide");
});
chauffeurRequest.fail(function (request, textStatus, errorThrown) {
setModalBody("error");
});
});
});
This is the markup of the modal:
<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalDialogLabel">Xwift</h5>
<button type="button" class="close closeModalButton" data-dismiss="modal" aria-label="Sluiten">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modal-dialog-body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="closeModalButton" disabled class="btn btn-primary closeModalButton" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
The situation:
$("##Html.IdFor(m => m.AanwezigheidChauffeurID)") is referring to a select element. When I change the value of the drop-down, the AJAX request is launched and the modal dialog is shown. When the request is done, the modal is closed by calling $("#modalDialog").modal("hide");.
Now when I change the value of the drop-down again, the request is launched again and the modal is shown again. When the request is done, I can see the changes in the DOM through the backdrop from the modal, but the modal won't close anymore. When I call the line $("#modalDialog").modal("hide"); in the console to test it, the modal does close.
Is there some reason why it won't close the second, third or more time?

Too bad I already asked this question before finding following question here on StackOverflow: Bootstrap 4 Modal Not Closing Properly On Hide
Several comments and answers refer to the fact that the fade class disrupts the whole hiding of the modal. I have tried removing this class and it worked for me as well. Sadly, I didn't find a reason for this.

jquery destroy modal dialog on close

I have a jquery modal dialog which is created as follows in a function:
function EditDialog(pk) {
$.ajax({
url: "{% url 'populatereviewform' %}",
method: 'GET',
data: {
pk: pk
},
success: function(formHtml){
//place the populated form HTML in the modal body
$('.modal-body').html(formHtml);
$( "#dialog" ).modal({width: 500, height: 500});
},
dataType: 'html'
});
return false;
}
How can I ensure that every time I call this function a fresh instance of the dialog is created? I wonder if somehow I can hook into the close event and ensure that the dialog is completely destroyed. I am trying to debug something and it seems that some of my variables do not get refreshed when this dialog is called a second time and I am trying to get to the bottom of it. The django template for creating the dialog is:
<div id="dialog" class="modal" title="Edit" style="display:none">
<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">Review Uploaded Image</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>

You can use the bootstrap modal callback.
$('#dialog').on('hidden.bs.modal', function () {
$('.modal-body').html('');
});

How do I update the -data-row attribute inside a modal launched with jQuery?

I have a modal that is launched like this:
<a href="javascript:;" class="edit_item" data-row="6">
<i class="icon-open"></i>
</a>
Which then in return fires
$( document ).on( "click", ".edit_item", function() {
var row=$(this).data("row");
var params="myfile.php&link="+row;
open_box_edit(params);
});
The open_box_edit is just:
function open_box_edit(params)
{
var URL=ajax_url+"/?"+params;
var modal = $('#modal_edit');
modal
.find('.modal-body')
.load(URL, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.modal("show");
}
});
}
Everything works correctly inside modal-body, but now I have added a modal-footer div to that modal and inside that div is a link to delete an item, which has the same data-row attribute as the opened modal. Basically:
<div id="modal_edit" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="plan-info-edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- CONTENT HERE -->
</div>
<div class="modal-footer">
<!-- DELETE BUTTON -->
<a href="javascript:;" class="delete_item" data-row="">
<i class="icon-delete"></i>
</a>
<!-- DELETE BUTTON -->
</div>
</div>
</div>
</div>
How do I do it so that the <a href="javascript:;" class="delete_item" data-row=""> essentially becomes <a href="javascript:;" class="delete_item" data-row="6">? Basically all I need to do is update the data-row of delete_item class inside the modal.
Any hints are greatly appreciated!
UPDATE 1:
I am thinking possibly giving open_box_edit another parameter (the row) and then in the function run something like $('.delete_item').data('row', row);. But how do I target that specific div and modal-footer?

Update the data attribute when edit item is clicked.
$( document ).on( "click", ".edit_item", function() {
var row=$(this).data("row");
$('.delete_item').data("row",row); // add this line
var params="myfile.php&link="+row;
open_box_edit(params);
});

try this:
.load(URL, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
$('div.modal-footer > a.delete_item').data('row', param);
modal.modal("show");
}

var val=6;
var footerDataRow=$(".modal-footer").find('a');
footerDataRow.data('data-row',val);
This can be done in one line, I have dissected it so that you understand it.

Add Button to parent div statically

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()

prevent bootstrap modal window from closing on form submission

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.