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.
Related
I am trying to display a modal by using bootstrap framework. Before showing modal, I let my web application connect to php file to get some data. Once data is being delivered by the php, it supposes to display the modal but it does not work. But when I clicked on the second the modal is shown normally.
Why the modal is not showing on the first time I click? But it does show the second time I click.
This is how I called php file
function btnClick(id) {
jQuery.ajax({
type: 'GET',
url: 'helpers/helper_functions.php',
data: {action: 'test'},
dataType: 'json',
success: function(output) {
if (output['data'] != null) {
const session = output['data'];
$('$entryModal').modal('show');
showModal(id, session)
} else {
if (output['error'] != null) {
console.log(output['error'])
} else {
console.log(output)
}
}
},
});
}
This is showModal function
function showModal(entry_id, session) {
$('body').on('show.bs.modal', '#entryModal', function () {
$('#video_wrap').html(
'<div id="some_id" style="width:640px;height:420px;">session</div>'
);
//
})
$('#entryModal').on('shown.bs.modal', function () {
console.log('the modal is shown')
});
$('#entryModal').on('hidden.bs.modal', function () {
//
});
}
This is the html file
<button id="watch_btn" type="button" class="smallBtn" data-toggle="modal"
data-target="#entryModal" onclick="btnClick('<{ $data }>')">
<{ $data }>
</button>
<!-- Modal -->
<div class="modal fade" id="entryModal" tabindex="-1" role="dialog"
aria-labelledby="entryModalDialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: fit-content;"
role="document">
<div class="modal-content" style="width: 640px;" >
<div id="video_wrap"></div>
</div>
</div>
</div>
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 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.
I am trying to create a map page where the user can select multiple items to display on the map. I already got the map working with google maps javascript api but it only shows one item at a time based on the id in the url.
I am open to suggestions, but I am thinking the user should be able to open a popup or combobox which contains a list of items. Multiple items can be selected and when the user clicks ok, the selected items are passed into a partial view containing the map.
Any help will be greatly appreciated, thanks in advance!!
Here are some bits of code from other parts of the site that might be helpful. I modified some of it to make sense in this context so I'm sorry if it's sloppy.
Popup window, could use this or some sort of combobox:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
data-backdrop="static" data-keyboard="false" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Select Assets</h4>
</div>
<div class="modal-body">
<form>
<input type="checkbox" id="select_all" /> All Assets
#{ List<string> usedNodes = new List<string>(); }
#foreach (var run in Model.Runs)
{
if (!usedNodes.Contains(run.NodeID))
{
if (run.GPS_Lattitude != zero && run.GPS_Longitude != zero)
{
<input type="checkbox" /> #run.NodeID
}
usedNodes.Add(run.NodeID);
}
}
</form>
</div>
<div class="modal-footer">
<button id="cancel" type="button" class="btn btn-primary">Cancel</button>
<button id="ok" type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
Popup script:
window.onload = function () {
getMapMarkers();
$('#cancel').on('click', function (e) {
$('#myModal').modal('hide');
});
$('#ok').on('click', function (e) {
$('#myModal').modal('hide');
getMapMarkers();
});
}
function getMapMarkers() {
$.ajax({
url: '#Url.Action("GetMarkers", "Map")',
type: 'GET',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: { nodename: node, servername: server },
success: function (???) {
???
}
});
}
Partial view change script, working great for selecting one item from a dropdown, but now I need to be able to select multiple items:
$('#assetSelect').change(function () {
var assetId = $(this).val();
$.ajax({
type: 'GET',
url: "#Url.Action("MapData", "Map")",
data: {
Id: assetId
},
success: function (result) {
$('#partialMap').html(result);
$('#partialMap').fadeIn('fast');
}
});
});
Script for the select all checkbox seen in the popup window, does what it's supposed to, but it needs to become unchecked when you uncheck any other item:
$('#select_all').click(function () {
var c = this.checked;
$(':checkbox').prop('checked', c);
});
Thanks again!