Develop Reference

JQuery does not open Bootstrap modal on mobile(iPhone)

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;
}

Boostrap modal not loading when wired using jquery

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

Function to append modal

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');
});

Twitter Bootstrap modal windows shade not closing

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.

Open and Load Modal Window w/ Javascript and Codeigniter

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.