We Keep Coding

eventHandler trigger multiple times when using .on() only

function changeStatus() {
$('#dataTable tbody').on('change', '.orderStatus', function () {..code}
}
function showOrdersInModal() {
$('#dataTable tbody').on('click', '.fa-eye-btn', function (e) {...code}
}
function addUrl() {
$('#dataTable tbody').on('click', '.addUrl', function () {..code}
}
function showOrders() {
$.ajax({
type: 'method',
url: 'url',
data: { data },
success: function (response) {
$('#dataTable').DataTable().clear().destroy();
let data = JSON.parse('[' + response.replace(/}{/g, '},{') + ']');
$('#dataTable').DataTable( {
autoWidth: false,
pageLength: 25,
lengthMenu: [[25, 50, 100, 500, -1], [25, 50, 100, 500, 'All']],
data: data,
columns: [
{ data: 'receipt' },
{ data: 'first_last_name' },
{ data: 'contact_no' },
{ data: 'address' },
{ data: 'email' },
{ data: 'url' },
{ data: 'status' },
],
});
showOrdersInModal();
changeStatus();
addUrl();
},
});
}
showOrders();
When I use .off() before .on(), the only last function will execute which is addUrl(); but when I remove the .off() it will trigger the event depending on how many times I click any of each button or element.
Is there a way that I can make the eventHandler trigger once even if I clicked any of the buttons multiple times?
or is there a way to execute all three functions not just the addUrl(); function at the end?

I found the answer and when using the dataTables I cannot access the DOM after the next page so I use drawCallback which like this:
$('#dataTable').dataTable({
drawCallback: function () {
showOrdersInModal();
changeStatus();
addUrl();
},
retrieve: true,
deferRender: true,
data: data,
columns: [
{ data: 'data' },
],
});
then I just use this.
$('.className').off().on('click', function () {..code}

html - show data from parent to modal in bootstrap

I am having a page and i am using the following code to show in title the surname & name(cname in the code).
html:
<div class="col-xs-4">
<!-- Title -->
<h3 id="cName"> </h3>
</div>
js:
$(document).ready(function() {
getCustomer(global_customer_id);
});
function getCustomer(id) {
$.ajax({
url: "api/customer.php?action=getCustomer",
type: "POST",
data: {
'customer_id': id
},
dataType: 'json',
success: function(result) { //
if (result.success === true) {
$('#cName').html(result.customer.surname + " " + result.customer.name);
}
}
});
}
Until here everything is fine.
On my page, i am having a button which load a modal.
I am trying to show cname in my modal on title too.
My modal title code with no result:
<h3 id="cName"> </h3>
Modal js(works fine for the datatable in modal):
function getCustomerAppointmentWork() {
$('#filter_appointment').modal('show');
setTimeout(function() {
if ($.fn.DataTable.isDataTable('#FilterAppointmentTable')) {
$('#FilterAppointmentTable').DataTable().destroy();
}
$('#FilterAppointmentTable').DataTable({
ajax: 'api/customer.php?action=getCustomerAppointmentWork&customer_id=' + global_customer_id,
processing: true,
serverSide: true,
ordering: false,
dom: '<"DataTableInfo"i><"DataTableFilter"f>rt',
scrollY: 520,
scroller: true,
initComplete: function(settings, json) {
$('.dataTables_scrollBody').css({
'overflow': 'hidden',
'overflow-y': 'auto'
});
},
columnDefs: [
{width: "67px", targets: 0},
{width: "22%", targets: 1},
{width: "6%", targets: 2}
],
});
}, 500);
}
How can i show cname in modal title?

You could use the shown method of the modal and load the data.
html:
<div class="col-xs-4">
<!-- Title -->
<h3 id="cNameModal"> </h3>
</div>
js:
$(document).ready(function() {
getCustomer(global_customer_id);
});
function getCustomer(id) {
$.ajax({
url: "api/customer.php?action=getCustomer",
type: "POST",
data: {
'customer_id': id
},
dataType: 'json',
success: function(result) { //
if (result.success === true) {
$('#cName').html(result.customer.surname + " " + result.customer.name);
$('#cNameModal').html(result.customer.surname + " " + result.customer.name);
}
}
});
}
$( "#filter_appointment" ).on('shown.bs.modal', function(){
getCustomer(global_customer_id);
});

Hide a button in jquery based on user access

I'm trying to hide a button. If it was on the html i would simply do
<security:authorize access="hasAuthority('Administrator')">
//html button code
</security:authorize>
but my delete button is being generated from datatable.
var table = $('#dataTable').DataTable({
language: {
searchPlaceholder: "Search...",
emptyTable: "There are no available flows."
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
},
{type: "date-euro", targets: 7},
{type: "date-euro", targets: 8}
],
order: [[1, 'desc']],
select: {
style: 'multi',
selector: 'td:first-child'
},
lengthChange: false,
dom: 'Bfrtip',
buttons: [
{
text: '<span class="fa fa-plus"></span> Create',
className: 'btn-primary-outline',
action: function () {
location.href = "create-flow";
}
},
{
text: '<span class="fa fa-trash"></span> Delete',
className: 'btn-danger-outline',
action: function () {
console.log($('#hasAuthority').val());
var selectedRows = table.rows({selected: true});
if (selectedRows.nodes().length > 0) {
//Get names
var data = selectedRows.data();
var names = [];
$.each(data, function (index, value) {
names.push(value[2]);
});
//Remove them
$.ajax({
url: '/flow/delete?names=' + names,
type: 'delete',
success: function () {
//reload page
location.reload();
}
});
//de-select selected rows
table.rows('.selected').deselect();
}
}
}
]
});
I'm trying to give a value to a input if user is admin or not but I'm getting undefined
<security:authorize access="hasAuthority('Administrator')" var="hasAuthority"></security:authorize>
<input type="hidden" id="hasAuthority" value="${hasAuthority}">
But then how do I corporate the if(hasAuthority) only on the delete button? The syntax doesn't match.

How can i get event id in fullcalendar.js from database

I add fullcalendar.js to my asp.net MVC project.i can save event in database and i have not any problem but when i click event to update that i have not access to id of event to update database record.how can i get the event id from database?
the js code is:
function GetEvent() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
//$('#modal-responsive').modal('show');
document.getElementById("event-title").value = null;
var title = null;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: start,
end: end,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var description = document.getElementById("field-3").value;
var startDay = document.getElementById("fromDate1").value;
var startHour = document.getElementById("field-4").value;
var endDay = document.getElementById("toDate1").value;
var endHour = document.getElementById("field-6").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
$.ajax({
url: "/Calender/Save",
type: 'Post',
data: {
Title: title,
Description: description,
StartDay: startDay,
StartHour: startHour,
EndDay: endDay,
EndHour: endHour
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
$('.fc-event-inner').uniqueId();
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true,
events: function() {
$.ajax({
url: "/Calender/GetEventId",
type: 'POST',
data: { eventId:},
success: function (doc) {
events.push(doc);
callback(events);
}
});
},
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////Update Event////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
eventClick: function (event, jsEvent, view) {
var title = event.title;
var EventStart = event.start;
var EventEnd = event.end;
var eventAllday = event.allDay;
//document.getElementById("event-title").value=title;
//document.getElementById("fromDate1").value = EventStart;
document.getElementById("toDate1").value = EventEnd;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: EventStart,
end: EventEnd,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
//title = document.getElementById("event-title").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
title = document.getElementById("event-title").value;
$.ajax({
url: "/Calender/Save",
type: 'Post',
dataType: "Json",
data: {
Title: title,
start: EventStart,
end: EventEnd,
allDay: event.allDay
// Description: description,
//StartDay: startDay,
//StartHour: startHour,
//EndDay: endDay,
//EndHour: endHour
}
});
event.start = start;
event.end = end;
event.allDay = event.allDay;
event.title = title;
calendar.fullCalendar('updateEvent', event);
//calendar.fullCalendar( 'refresh' );
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"closeو": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true
});
};

The first parameter of the eventClick callback is an event object which has an id property on it, so you should be able to access it like this: event.id

Retain filter,sort,expanded,page,selection from jqgrid after reload

I need to refresh data from server in jqgrid automatically for 10 minutes interval .
After refresh i need to retail filter,sorting,subgrid expanded, page, selected row(multiple).
I am able to retain all except page and selected row. In this i can able to do either page or selected row only. Cant able to retain both. Only one works for me.
Code
jQuery("#tblCompletedPriceList").jqGrid({
url: $('#tblCompletedPriceList').attr("RequestUrl"),
datatype: "json",
mtype: "Get",
hoverrows: false,
colNames: CompletedColName,
colModel: CompletedColModel,
id: 'PriceListID',
localReader: { id: 'PriceListID' },
prmNames: { id: "PriceListID" },
rowNum: 10,
hidegrid: false,
rownumbers: true,
pager: '#CompletedPriceListGridPager',
viewrecords: true,
caption: "Completed Price List Queue",
height: 'auto',
scrollOffset: 0,
gridview: true,
shrinkToFit: true,
autoencode: true,
loadonce: true,
ignoreCase: true,
multiselect: true,
subGrid: true,
enableClear: true,
loadComplete: function () {
UnBlockUI();
var $this = $(this);
var selRowIds = jQuery('#tblCompletedPriceList').jqGrid('getGridParam', 'selarrow');
postfilt = $this.jqGrid('getGridParam', 'postData').filters;
postsord = $this.jqGrid('getGridParam', 'postData').sord;
postsort = $this.jqGrid('getGridParam', 'postData').sidx;
postpage = $this.jqGrid('getGridParam', 'postData').page;
var selRowIds = jQuery('#tblCompletedPriceList').jqGrid('getGridParam', 'selarrrow');
if ($this.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$this.jqGrid("setGridParam", {
datatype: "local",
postData: { filters: postfilt, sord: postsord, sidx: postsort },
search: true
});
$this.trigger("reloadGrid", [{ page: postpage }]);
}, 15);
}
if (expandedids != "") {
$("#tblCompletedPriceList").jqGrid('expandSubGridRow', expandedids);
expandedids = "";
}
if (selRowIds.length < 1) {
return false;
} else {
var i, count;
for (i = 0, count = selRowIds.length; i < count; i++) {
jQuery('#tblCompletedPriceList').jqGrid('setSelection', selRowIds[i], false);
}
}
},
beforeRequest: function () {
$("#tblCompletedPriceList tr:has(.sgexpanded)").each(function () {
expandedids = $(this).attr('id');
});
}
});
To reload
window.setTimeout(refreshGrid, 600000);
function refreshGrid() {
$('#tblCompletedPriceList').setGridParam({ datatype: 'json' }).trigger("reloadGrid");
window.setTimeout(refreshGrid, 600000);
}