Hello I have Page with modal windows which I open with this JS code:
$('.open-modal').on('click', function (event) {
event.preventDefault();
var object = $(this);
modals(object.attr('href'))
})
function modals(href) {
$("#Modal").modal("hide");
$.ajax({
url: href,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: 'html',
//data: { id: $(this).attr('id') },
error: function (data) {
alert("wystąpił nieokreślony błąd " + data);
},
success: function (data) {
$('.modal-body').html(data);
$("#Modal").modal('show');
$('.ChangeToEdit').on('click', function (event) {
$("#Modal").modal('hide');
event.preventDefault();
var object = $(this);
modals(object.attr('href'))
})
}
});
}
and html:
<div class="modal fade" id="Modal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and example of buttons:
<a class="open-modal" href="/User/Edit/14">Edit</a> |
<a class="open-modal" href="/User/Details/14">Details</a> |
<a class="open-modal" href="/User/Delete/14">Delete</a>
If User open modal with Details he will find modal with details and button to edit this data. After pressing that button modal window should close and open new one with edit.
Unfortunately. When user use edit button on details modal a second " shade" appears and stay there even after edit modal is closed.
What I'm doing wrong? why second shade shade from first modal doesn't disappear?
Try to do$(".modal-backdrop").removeClass(); after you closed the first modal.
Related
I have a bootstrap modal window that I am using in my ASP.NET MVC application.
This modal window is parametrized, I can specify title and message text.
Below is the modal window, MyConfirmModalDialog.cshtml:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true"
style="padding:0px;margin-left:0px;left:42%;min-width:15%">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirmCancel">No</button>
<button type="button" class="btn btn-primary" id="confirmOk">Yes</button>
</div>
</div>
</div>
</div>
This modal window is placed within another view using razor helper:
#Html.Partial("MyConfirmModalDialog");
Then I use it like below to show it to the user:
showConfirmation = function (title, message, success, cancel) {
var modal = $("#confirmModalDialog");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false });
var fClose = function () {
modal.modal("hide");
};
modal.modal("show");
$("#confirmOk").unbind().one('click', success).one('click', fClose);
$("#confirmCancel").unbind().one("click", fClose);
};
function onPerformActions() {
var title = "Warning";
var message = "Do you wish to continue?";
var success = function () {
performActions();
};
var cancel = function () {
// Do nothing
};
showConfirmation(title, message, success, cancel);
}
If user clicks on 'Yes' button, from success function I call the method peformActions as above code shows. Below method performActions, basically in performs an ajax asynchronous call to an action in the controller:
function performActions()
{
$.ajax({
url: '#Url.Action("DoActions", "MyController", new { area = "MyArea" })',
type: "POST",
async: true,
success: function (resp) {
// Do some things on success
},
error: function () {
// Do some things on error
}
});
}
The problem I have is that modal window is not closed immediately when user clicks on 'Yes' button, it takes some seconds, and then this modal window is overlapped with the next modal window that is shown afterwards in the process.
I have table in modal with edit button to update the user details
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">User Info</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form>
<div class="modal-body edit-info" >
</div>
<div class="modal-footer">
<button type="submit" class="roomupdate btn btn-warning">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
and my ajax code is
$(document).on('click', '.roomupdate', function(){
ev.preventDefault();
$id= $('#id').val();
$building=$('#building').val();
$floorno=$('#floorno').val();
$roomno=$('#roomno').val();
$priority=$('#priority1').val();
$nobeds=$('#nobeds').val();
$('#editModal').modal('hide');
$.ajax({
type: "POST",
url: "addroomlist.php",
async: false,
data: {
building: $building,
id: $id,
floorno: $floorno,
roomno: $roomno,
priority: $priority,
nobeds: $nobeds,
roomupdate: 1,
},
success: function(){
showUser();
},
});
});
and my edit button code to call modal with user info.
<td> <button data-id='<?php echo $row['id'] ?>' class='roomedit btn btn-warning'>Edit</button></td>
when i first click save button after modify the details its working fine and modal closed with
$('#editModal').Modal('hide');
when i click edit button second time Modal not show up until i reload the page.
where it went wrong please help
In your ajax code remove $('#editModal').modal('hide'); from the line where you are using right now and put it in success function of ajax.
Like:
success: function(){
$('#editModal').modal('hide');
showUser();},
and if you are using location.reload(); in your showUser(); function then it will work but as far i know i think you did not add it in showUser(); so add also location.reload(); after showUser(); function or at the end of code written in showUser(); function.
And one more thing do you write any code by which clicking on edit button the modal should open in javascript?
I have a JSP page,say xyz.jsp. I have a button called "send Mail" that has it's onclick() property set to a script function called sendMail(). Sending mail includes sending html data to the controller for generating PDF for which I am using Ajax. Now after the mail is sent successfully ,i want to show a pop-up indicating success. So on Ajax success i want to trigger the popup.
I am using bootstrap modal for popup.
This is my code for button and modal:
<div id="reportbuttons">
<button type="button" class="btn bg-red waves-effect" onclick="convertToPdf()" style="margin-right: 5px;float: right; margin-top: -8px">Download</button>
<button type="button" class="btn bg-red waves-effect" onclick="sendMail()" style="margin-right: 5px;float: right; margin-top: -8px">Send Mail</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And, this is my script:
<script>
function sendMail() {
let doc = new jsPDF('p','pt','a4');
doc.setProperties({
title: 'PDF Document',
subject: 'subject',
author: 'ABC',
keywords: 'generated, javascript, web 2.0, ajax',
creator: 'XYZ'
});
//document.getElementById('reportbuttons').remove();
document.getElementById('reportbuttons').style.display ="none";
doc.addHTML(document.body, function() {
var data = doc.output('datauristring');
var reqJson = {};
reqJson.machineId = "<%=machineId%>";
reqJson.monthYear = "<%=monthYear%>";
reqJson.data = data;
$.ajax(
{
url : "sendMail/",
type: "POST",
dataType: 'json',
data : JSON.stringify(reqJson),
contentType: "application/json",
success:function(data)
{
$("#myModal").modal();
alert('mail sent successfully');
document.getElementById('reportbuttons').style.display ="block";
},
error: function(data)
{
document.getElementById('reportbuttons').style.display ="block";
}
});
});
}
</script>
I want to show the bootstrap modal popup after the mail is succesfully sent or in other words on Ajax success.
I have a Javascript/JQuery function which is supposed to open a bootstrap modal after an AJAX request.
This works on PC using Chrome but unfortunately it doesn't work on iPhone(Chrome/Safari)
The button:
<button type="button" id="GetEmployees" class="btn btn-primary" onclick="GetEmployees()">
<span class="glyphicon glyphicon-user"> </span>Toevoegen
</button>
The function:
function GetEmployees() {
$.ajax({
type: 'post',
url: appPath + '/TimeRegistration/GetEmployees',
data: { },
success: function (response) {
if (response != null) {
alert("Load");
$("#dialog-project .modal-body").html(response);
$("#dialog-project").modal("show");
alert("open");
}
},
error: function (response) {
alert("Onbekende fout opgetreden")
}
});
}
And here is the dialog itself:
<div id="dialog-project" class="modal fade" tabindex="-1" role="dialog" style="color: #333333;">
<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 id="dialog-title" class="modal-title">Aanmaken nieuwe tijdregel</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
For some reason on iPhone I get the alert "Load" but the modal isn't showing up and also the last alert is not showing up.
edit2: In order to make the buttons execute the JS at the first place I had to add:
$(document).ready(function () {
var touchEvent = 'onclick' in window ? 'click' : 'touchstart';
$('#GetEmployees').on('click touchstart', function () {
GetEmployees();
})
})
I am also faced a same issue. I was fixed by following code.
$( "#code" ).on('shown', function(){
$('body').css('position','fixed');
});
In IOS browser position has issue and it take fixed position.
This is due to css issue on ios dervices.
Just use cursor: pointer; in css. you can add class in it.
as like:-
.iosmodal{
cursor: pointer;
}
I have Modal in view for making new record in Database.
View for it in Partial View
Here is code of view
<script src="~/Scripts/jquery-3.1.1.js"></script>
For AJAX I using this code
<script>
$(document).ready(function () {
$('#save_quest').click(function () {
savequestion();
});
});
function savequestion() {
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
Question_new: $('#question').val(),
Answer: $('#answer').val(),
Preparing: $('#prepare').val(),
Retries: $('#retries').val(),
},
url: '#Url.Action("CreateNewQuestion", "Questions")',
success: function (da) {
if (da.Result === "Success") {
$('#myModal').modal('hide')
//window.location.href = da.RedirectUrl;
} else {
alert('Error' + da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
I need to hide modal when AJAX call is Successful
I try this $('#myModal').modal('hide')
Here is my modal on Primary View
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("~/Views/Questions/CreateQuestion.cshtml")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How I can hide it on AJAX Success?
You can try any of the below option in your ajax success block. Hopefully it will solve your problem.
$("#myModal").modal('hide');
OR
$('#myModal').modal('toggle');
OR
$('#myModal').removeClass('show');
OR
$('#myModal').modal().hide();
OR
$("#myModal .close").click();
OR
$("#myModal .close").trigger("click");
I found solution
Just need to write
$('#myModal').hide();
This is not the proper way.
$('#myModal').hide();
The proper way
$("#myModal").modal('hide');
Have you try adding bootstrap.js in your page? if not please include it in your page and then test. It should work.