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;
}
Related
I have an ASP.NET CORE MVC based app. I am having a strange behavior when trying to show a modal popup with JQuery.
I have following div:
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="form-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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>
</div>
</div>
I have a button to show this div modal popup. When I click the button Javascript adds «in» to class so it becomes class="modal fade in", normally it should add «show». As a result the modal is not showing. So in the browser I enter dev mode and removed «in» and added «show» and it worked.
But I am wondering why my JQuery is adding «in» instead of «show».
Here is my JQuery:
jQueryModalGet = (url, title) => {
try {
$.ajax({
type: 'GET',
url: url,
contentType: false,
processData: false,
success: function (res) {
$('#form-modal .modal-body').html(res.html);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
console.log(res);
},
error: function (err) {
console.log(err)
}
})
return false;
} catch (ex) {
console.log(ex)
}
}
Any idea ?
Finally, I solved the issue.
For some strange reason I included two different versions of Bootstrap and JQuery at the same time so the conflict was happening in the modal show process.
I had:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
After removing:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
And using only the local binded libs I resolved it!
Now it works like a charm.
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.
I have the following link and I'm trying to load a bootstrap modal when its clicked but the javascript function doesnt seem to be firing. Instead of the view loading inside a modal, its loading as a new page?
#*this is the modal definition*#
<div class="modal hide fade in" id="report-summary">
<div id="report-summary-container"></div>
</div>
<script >
$('a.js-report-summary').click(function (e) {
var url = $(this).attr('href'); // the url to the controller
e.preventDefault();
$.get(url, function (data) {
$('#report-summary-container').html(data);
$('#report-summary').modal('show');
});
});
</script>
public ActionResult ReportSummary()
{
// some actions
return PartialView("ReportSummary", viewmodel)
}
// Report summary view which contains modal
<div class="modal-dialog" role="document">
<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="myModalLabel">#ViewBag.FormName - Analysis</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
There are no errors showing in the console either so why isn't the jquery function firing?
in your click function, add parameter e this will stand for event
then in the function itself add e.preventDefault() This will stop the refreshing effect.
on your controller method try
public ViewResult ReportSummary()
{
// some actions
if(Request.IsAjaxRequest())
return PartialView("ReportSummary", viewmodel);
else
return View("ReportSummary", viewmodel);
}
on your view
$('#exampleModal').on('show.bs.modal', function (event) {//give your model wrapper an id
//do some ajax and get html
$.ajax({
url:'',
success:function(data){
$('#report-summary-container').html(data);
}
});
})
on your anchor tag, add data-toggle="modal" data-target="#exampleModal"
if you dont want to use bootstrap events trigger your modal with
$('#myModal').modal('show')
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.
I'm using Codeigniter and Datatables together and need to load a modal popup when the user clicks "view" for a certain row of data.
Here is my link with my onClick:
view
Here is my JS:
function notes_modal(data) {
$.ajax({
type: "POST",
url: "../load_notes_modal",
}).done(function ( html ) {
$("#selected_note").modal('show');
});
}
Here is my view that is being loaded by the "load_notes_modal" function I'm calling:
<div class="modal fade" id="selected_note" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
Random Content!
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">View Location Note</h4>
</div>
<div class="modal-body"></div>
</div>
</div>
I'm not getting any errors, just no luck getting the modal to show. I'm new to JS and trying to learn, I might be headed in the complete wrong direction!
You will want to put your modal trigger in the success callback like so:
HTML
view
JS
function notes_modal() {
$.ajax({
type: "POST",
url: "../load_notes_modal",
success: function ( html ) {
$("#selected_note").modal('show');
},
error: function() {
alert('ajax did not succeed');
}
});
}
function clickListener() {
$('.openModal').unbind();
$('.openModal').click(function (e) {
e.preventDefault();
notes_modal();
});
}
You have your dataTable something like below. Call the functions from within fnDrawCallback() so that each time the table is drawn, the listeners are called. Note the changes made above as well.
var oTable = $('#myTable').dataTable({
"fnDrawCallback": function (oSettings) {
notes_modal();
clickListener();
}
});
New Update: To work with dataTable redraw.