Trying to update cell after form submitted

[dtag1000]

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.

Code: [Select]

   $(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();


   
       });


[paramvir]

Your code looks outdated. Which version of grid you have been using?

There is no such method "getSelectionCurPage" in the grid.

Please don't override the pqGrid prototype:

Code: [Select]

$.paramquery.pqGrid.prototype.addRow

$.paramquery.pqGrid.prototype.updateRow

You can use updateRow() method to update the fields of the row as used in this example:

https://paramquery.com/pro/demos/crud

[dtag1000]

Ive been using 4.0.2 but copying and pasting from the examples, and adding in custom functions.

[dtag1000]

And then Im trying to update a database automatically. The demo you provided only updates a table.

[paramvir]

The method to update row remains the same in either case: updateRow()

Either you can update the row fields directly from the form or after ajax request to the database is complete. In latter case, the response from ajax request should contain the updated value of the row fields.

[dtag1000]

Thanks!

Also, can you make a youtube tutorial series? I can make it for you if you give permission.

[paramvir]

I wish it could be done but time won't permit considering such large number of demos.

Please go ahead if you have great idea.