I have jqgrid that need to refresh data onchange event, i create table with js and make object of jqgrid like this:
$('<table id="list2"></table>' +
'<div id="gridpager"></div>').appendTo('#topics');
grid = jQuery("#list2");
after this, I have an ajax function to get data from the database and I put jqgrid on the success method. here is the code.
function getReport(start_date,end_date) {
$.ajax({
url: "logics/inventory_reports",
type: "POST",
data: {
type: "getTrailBalance_report",
start_date: start_date,
end_date: end_date,
},
success: function (data) {
let dt = JSON.parse(data);
debugger;
grid.jqGrid({
datastr: dt.records,
datatype: "jsonstring",
height: "auto",
loadui: "disable",
pgbuttons : false,
pginput : false,
colNames: [/*"id",*/"Items","Debit", "Credit"],
colModel: [
//{name: "id",width:1, hidden:true, key:true},
{name: "name", width:250, resizable: false,sortable: false},
{name: "debit",width:150,sortable: false},
{name: "credit",width:150,sortable: false}
],
treeGrid: true,
pager : '#gridpager',
caption: "Trail Balance Report",
ExpandColumn: "elementName",
autowidth: true,
rowNum: 10000,
jsonReader: {
root: "response"
}
}).navGrid('#gridpager',{
view:true,
del:false,
search: false,
autoRefresh: true,
});
jQuery("#list2").trigger("reloadGrid");
}
});
}
and here is my dropdown onchange event.
<select name="time_period" id="time_period" class="form-control" onchange="getTimePeriod()">
<option value="0">--Select Time Period--</option>
<option value="cDay">Current Day</option>
<option value="lDay">Last Day</option>
<option value="cWeek">Current Week</option>
<option value="lWeek">Last Week</option>
<option value="cMonth">Current Month</option>
<option value="lMonth">Last Month</option>
<option value="cYear">Current Year</option>
<option value="lYear">Last Year</option>
</select>
here is the code of getTimePeriod() method from where I call the getReport method with passing parameters.
function getTimePeriod() {
let timePeriod = $("#time_period").val();
let periodDate = new Date();
let date = new Date(), y = date.getFullYear(), m = date.getMonth();
let message = "";
let FYear;
let start_date = new Date();
debugger;
switch (timePeriod) {
case 'cDay':
periodDate = new Date();
message = 'Current Day';
break;
case 'lDay':
//periodDate = new Date;
start_date.setDate(start_date.getDate() - 1);
periodDate.setDate(periodDate.getDate() - 1);
// periodDate = periodDate.toISOString().slice(0, 10);
message = 'Last Day';
break;
case 'cWeek':
//periodDate = new Date;
start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7); // Starting date of week
periodDate.setDate(periodDate.getDate() - (periodDate.getDay() - 7) % 7); // Ending date of Week
message = 'Current Week';
break;
case 'lWeek':
start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7);// Starting date.
start_date.setDate(start_date.getDate() - 7);
periodDate.setDate(periodDate.getDate() - (periodDate.getDay() - 7) % 7); // Ending date.
periodDate.setDate(periodDate.getDate() - 7);
message = 'Last Week';
break;
case 'cMonth':
start_date = new Date(y, m, 1); // Starting date of this month.
periodDate = new Date(y, m + 1, 0); // Ending date of this month.
message = 'Current Month';
break;
case 'lMonth':
start_date = new Date(y, m - 1, 1); // Starting date of the previous Month.
periodDate = new Date(y, m, 0); // Ending date of the previous Month.
message = 'Last Month';
break;
case 'cYear':
FYear = getFinancialYearsLastMonth();
start_date = new Date(y, FYear, 1); // Starting date of this Financial Year.
periodDate = new Date(y +1, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date.
message = 'Current Year';
break;
case 'lYear':
FYear = getFinancialYearsLastMonth();
start_date = new Date(y - 1, FYear, 1); // Starting date of previous Financial Year.
periodDate = new Date(y, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date
message = 'Last Year';
break;
}
// periodDate = periodDate.toISOString().slice(0, 10);
document.getElementById("showDate").innerHTML = getDateInFormat(periodDate);
getReport(ReFormateDate(start_date),ReFormateDate(periodDate));
}
avoid the rest code from getTimePeriod method just see the calling of getReport.
I put debugger and test that every time the data is updated but jqgrid is not refreshing the data. I tried but like jQuery(“#list2”).trigger(“reloadGrid”); and .navGrid(‘#gridpager’,{
view:true,
del:false,
search: false,
autoRefresh: true,
}); but no effected. Can you help me out with this issue, please?
Thanks!