Develop Reference

why my modal is not closing on clicking add area button

on click add area button my modal should be closed but it is not working. everything looks fine but i can not find error. id="category-popup" should close modal by $("#category-popup").modal('hide'); but it is not working can someone help me?
<div class="modal fade" id="category-popup" tabindex="-1" role="dialog" aria-labelledby="category-
popup" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Area</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="{{ route("save.area.ajax") }}" class="category-form">
{{ csrf_field() }}
<div class="form-group">
<label>Area Name</label>
<input type="text" name="name" class="form-control old-category" required="">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-block add-area-submit-btn">Add
Area</button>
</div>
</form>
</div>
</div>
</div>
</div>
java script
$('.add-category').click(function(event){
event.preventDefault();
$('.old-category').val('')
$('.category-form').attr('action' , '{{ route("save.area.ajax") }}');
$('#category-popup .modal-title').html('Add Area');
$('#category-popup .modal-footer button').text('Add Area');
});
$(document).on('click', '.add-area-submit-btn', function(e){
e.preventDefault();
var btn = $(this);
if($('.category-form .old-category').val() != ""){
$.ajax({
type: 'post',
data: $('.category-form').serialize(),
url: $('.category-form').attr('action'),
success: function(res){
$("#area-select").html(res);
$("#category-popup").modal('hide');
}
});
}
});

The syntax for hiding modal is correct but please make sure that your $.ajax request is succeeding. Try doing console.log() in $.ajax success. Or add error in your ajax so you could know the error
$.ajax({
type: 'post',
data: $('.category-form').serialize(),
url: $('.category-form').attr('action'),
success: function(res) {
console.log("ajax request success");
$("#area-select").html(res);
$("#category-popup").modal('hide');
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("ajax request failed: " + errorThrown);
}
});

check errors in the cnsole it submit area in option field but not closed

Hm, weird, are you sure you include jQuery correctly? Could you show your included scripts?
jQuery should be like: <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In JavaScript one error results in broking whole script. And without jQuery your "modal" action will not work. I think it's the reason why your script not working.

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

Bootstrap modal with feedback not dismissing

I'm using a BS Modal to show the feedback on a newsletter form.
It uses AJAX and PHP to insert the e-mails on DB and returns the STATUS.
The PHP and the AJAX response are working fine, with validations and everything, BUT, when I call the Modal using the JS to show the feedback, the modal doesn't close anymore, can't be dismissed.
The modal:
<div id="myModal" class="modal fade" 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">ENGINE|Sistemas</h4>
</div>
<div class="modal-body">
<p id="response"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
And the JS:
$(function()
{
var form = $('#newsletter-form');
$(form).submit(function(e)
{
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
// ----------------------------------------
// Success
// ----------------------------------------
.done(function(response)
{
$('#myModal').modal('show');
$('#myModal, #response').replaceWith(response);
$('#newsletter-email').val('');
})
// ----------------------------------------
// Error
// ----------------------------------------
.fail(function(data)
{
if (data.responseText !== '')
{
$('#myModal').modal('show');
$('#myModal, #response').replaceWith(data.responseText);
}
else
{
alert('Ocorreu um erro! Seu email não foi cadastrado.');
}
});
});
});
I don't understand why tho modal shows up perfectly with the response, but simply doesn't close anymore...
Any help?

do you see error js in console?? if no, try this :
$("#myModal").on('hidden', function(){
$("#myModal").remove();
$('.modal-backdrop').remove();
});

Well, now it's working.
I don't know why, but the response was blocking the modal to behave correctly.
Solved just changing:
$('#myModal').modal('show');
$('#myModal, #response').replaceWith(data.responseText);
to
$('#myModal').modal('show');
$('#response').text(data.responseText);
=)

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.