Hello,
My code below echo's out the table in JSON format. Then beside each row, it shows a edit button. When the edit button is clicked, then a modal pops up with the information row. When I hit submit, it makes a ajax request to my database. I want to have the cell show the update, without refreshing the page.
$(function () {
function filterRender(ui) {
var val = ui.cellData,
filter = ui.column.filter;
if (filter && filter.on && filter.value) {
var condition = filter.condition,
valUpper = val.toUpperCase(),
txt = filter.value,
txt = (txt == null) ? "" : txt.toString(),
txtUpper = txt.toUpperCase(),
indx = -1;
if (condition == "end") {
indx = valUpper.lastIndexOf(txtUpper);
//if not at the end
if (indx + txtUpper.length != valUpper.length) {
indx = -1;
}
}
else if (condition == "contain") {
indx = valUpper.indexOf(txtUpper);
}
else if (condition == "begin") {
indx = valUpper.indexOf(txtUpper);
//if not at the beginning.
if (indx > 0) {
indx = -1;
}
}
if (indx >= 0) {
var txt1 = val.substring(0, indx);
var txt2 = val.substring(indx, indx + txt.length);
var txt3 = val.substring(indx + txt.length);
return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
}
else {
return val;
}
}
else {
return val;
}
}
function post_edit(){
var form = document.getElementById('edit-form');
var action = form.getAttribute('action');
var form_data = new FormData(form);
for([key, value] of form_data.entries()){
console.log(key + ": " + value);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', action, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
}
};
console.log(form_data);
xhr.send(form_data);
var text = $('input#filter_box').val();
localStorage.setItem("text", text);
location.reload();
}
function filterhandler() {
var $toolbar = this.toolbar(),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterRules;
if (dataIndx == "") {//search through all fields when no field selected.
filterRules = this.getColModel().map(function(column){
return { dataIndx: column.dataIndx, condition: condition, value: value };
})
}
else {//search through selected field.
filterRules = [{ dataIndx: dataIndx, condition: condition, value: value}];
}
this.filter({
oper: 'replace',
rules: filterRules
});
}
function addhandler(evt, ui) {
$("#addPage").modal("show");
}
function editRow(k, grid, edit) {
$("#edit_advertiser").modal("show");
var rowData = $("#grid_crud-remote").pqGrid( "getRowData", { rowIndx: k } );
$("#key").val(rowData.AdvertiserKey);
$('#name').val(rowData.name);
$('#click_me').on('click', $('#ajax-submit'), post_edit);
}
function _getSelection() {
var selection = $grid.pqGrid("selection", { type: 'row', method: 'getSelectionCurPage' });
if (selection.length > 0) {
var rowIndx = selection[0].rowIndx;
return rowIndx;
}
else {
alert("Please select a row");
return null;
}
}
function edithandler(evt, ui) {
var rowIndx = _getSelection();
if (rowIndx != null) {
$grid.pqGrid("openEditForm", { rowIndx: rowIndx, title: "Edit Customer ({0})" });
$grid.one("pqgridload", function (evt, ui) {
//alert("loaded once");
$grid.pqGrid("setSelection", { rowIndx: rowIndx });
}); ;
}
}
function deletehandler(evt, ui) {
var rowIndx = _getSelection();
if (rowIndx != null) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx });
}
}
//define editor
function customerIdEditor(ui) {
var oper = ui.oper,
cls = ui.cls,
dataIndx = ui.dataIndx,
readonly = "";
if (oper == "edit") {
readonly = "readonly='true'";
}
return "<input id='filter_input' type='text' " + readonly + " class='" + cls + "' maxlength=5 size=5 name='" + dataIndx + "' />";
}
//override the addRow method of pqToolbarCrud
$.paramquery.pqGrid.prototype.addRow = function (obj) {
var $grid = this.element,
rowData = obj.rowData;
//$grid = $toolbar.closest(".pq-grid");
rowData["pq_oper"] = "add";
$grid.pqGrid("option", "dataModel.postDataOnce", rowData);
}
//override the editRow method of pqToolbarCrud
//debugger;
$.paramquery.pqGrid.prototype.updateRow = function (obj) {
//alert("edit row");
//debugger;
var $grid = this.element,
rowData = obj.rowData;
//$grid = $toolbar.closest(".pq-grid");
rowData["pq_oper"] = "edit";
$grid.pqGrid("option", "dataModel.postDataOnce", rowData);
}
var colM = [
{ title: "name", width: 500, dataIndx: "name"},
{ title: "AdvertiserKey", width: 140, dataIndx: "AdvertiserKey", align: "center" },
{ title: "", editable: false, minWidth: 90, sortable: false,
render: function (ui) {
return "<button type='button' class='edit_btn'>Edit</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find(".edit_btn")
.bind("click", function (evt) {
editRow(rowIndx, grid);
});
//if it has edit class, then edit the row.
if (grid.hasClass({ rowData: ui.rowData, cls: 'pq-row-edit' })) {
editRow(rowIndx, grid);
}
}
}
];
<?php $db->advertisers_table(); ?>
var dataModel = {
data: data
}
var newObj = {
width: "1000px",
flexHeight: true,
flexWidth: "100%",
pageModel: { type: "local", rPP: 50, rPPOptions: [11, 20, 50, 100] },
postRenderInterval: -1,
dataModel: dataModel,
colModel: colM,
selectionModel: { mode: 'single' },
toolbar: {
cls: 'pq-toolbar-crud',
items: [
{
type: 'textbox',
label: 'Filter: ',
attr: 'placeholder="Enter your keyword"',
attr: 'id=filter_box',
cls: "filterValue",
listener: { keyup: filterhandler }
},
{ type: 'button', label: 'Add Advertiser', icon: 'ui-icon-plus', listeners: [{ click: addhandler}] },
{
type: 'select',
label: 'Format: ',
attr: 'id="export_format"',
options: [{csv: 'Csv', htm: 'Html', json: 'Json'}]
},
{type: 'button', label: "Export", icon: 'ui-icon-document', listener: function () {
var format = $("#export_format").val(),
blob = this.exportData({
//url: "/pro/demos/exportData",
format: format,
render: true
});
if(typeof blob === "string"){
blob = new Blob([blob]);
}
saveAs(blob, "pqGrid."+ format );
}
},{
type: 'select', cls: "filterColumn",
listener: filterhandler,
options: function (ui) {
var opts = [];
this.getColModel().forEach(function(column){
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
})
return opts;
}
},
{
type: 'select',
cls: "filterCondition",
listener: filterhandler,
options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" },
{ "regexp": "Regex" }
]
}
]
},
editable: true,
scrollModel: { horizontal: false },
title: "Advertisers",
columnBorders: true
};
var $grid = $("#grid_crud-remote").pqGrid(newObj);
$grid.pqGrid( 'option', 'dataModel.data', data );
var $pqPager = $("#grid_crud-remote").find(".pq-pager").pqPager();
});
