'newcls is undefined' error when attempting edit update of a row

[gblawler]

Hi, I just recently started using ParamQuery (Pro) v 3.2.0, and have a mostly full implementation done of a simple grid I'm using with support for insert/update/deletes.

I've got the inserts & deletes working fine now, but whenever I go to do an update (I'm using the auto-saving mode, with demo here:

http://paramquery.com/pro/demos/editing_instant

).

In the console on Firefox I get:

TypeError: newcls is undefined

pointing to this line in pqgrid.dev.js: 6581:

TypeError: newcls is undefined

Code: [Select]

newcls = uniqueArray(newcls.split(/\s+/)).join(" ");
Could anyone help me out on what I'm doing wrong here, if anything?  I imagine I may just be missing some option or have an incompatible one set or something, but I'm surprised since the updates and deletes work.

[paramvir]

Is it possible for you to post your code and full call stack of the error.

[gblawler]

Call stack from Firebug is:

fn.addClass(_objP=Object { type="object"})pqgrid.dev.js (line 6581)
_pUCData.update(objP=Object { type="object"})pqgrid.dev.js (line 12145)
fn._digestData(ui=Object { type="object"})pqgrid.dev.js (line 5395)
fnGrid.updateRow(ui=Object { type="object"})pqgrid.dev.js (line 12712)
fn.saveEditCell(objP=Object { type="object"})pqgrid.dev.js (line 5214)
_pKeyNav._saveAndMove(objP=Object { type="object"}, evt=Object { type="object"})pqgrid.dev.js (line 7046)
_pKeyNav._keyDownInEdit(evt=Object { type="object"})pqgrid.dev.js (line 7184)
fn._editCell/<(evt=Object { type="object"})pqgrid.dev.js (line 5865)
jQuery.event.dispatch(event=Object { type="object"})jquery.js (line 5094)
jQuery.event.add/elemData.handle(e=Object { type="object"})jquery.js (line 4766)

I hope just my PQ option structure is sufficient for the code:

Code: [Select]

var gridLFE_opt = {
  collapsible: false,
  width: 300,
  dataModel: {
    location: "remote",
    dataType: "JSON",
    method: "GET",
    getUrl: function() {
      return {
        url: 'ajax_table_read.php',
        data: {
          TableName: 'LinkedFileEntity',
          LinkedFileId: $('#Id').val()
        }
      };
    },
    recIndx: 'Id',
    getData: function (dataJSON) {
      var data = dataJSON.data;
      return { totalRecords: dataJSON.totalRecords,
               data: data };
    }
  },
  colModel: [
    { dataType: 'integer', dataIndx: 'Id', hidden: true, editable: false },
    { title: "Entity", dataIndx: "EntityName", width: 90,
       editor: {
        type: 'select',
        valueIndx: "value",
        labelIndx: "value",
        options: [
          { "value": "" },
          { "value": "c" },
          { "value": "d" }
        ]
      },
      validations: [{ type: 'minLen', value: 1, msg: "Required"}]
    },
    { title: 'Id', dataIndx: "EntityId", width: 70,
      validations: [{ type: 'regexp', value: /^[1-9][0-9]*$/, msg: "integer only"}]
    },
    { title: "Purpose", dataIndx: "PurposeCode", width: 100,
       editor: {
        type: 'select',
        valueIndx: "value",
        labelIndx: "value",
        options: [
          { "value": "" },
          { "value": "a" },
          { "value": "b" }
        ]
      },
      validations: [{ type: 'minLen', value: 1, msg: "Required"}]
    },
    { title: "", editable: false, minWidth: 55, sortable: false,
        render: function (ui) {
            return "<button type='button' class='delete_btn'></button>";
        },
        postRender: function (ui) {
            var grid = this,
            $cell = grid.getCell(ui);
            $cell.find(".delete_btn")
                .button({ icons: { primary: 'ui-icon-scissors'} })
                .bind("click", function (evt) {
                  if (ui.rowData.Id === undefined ||
                      confirm('are you sure?'))
                     grid.deleteRow({ rowIndx: ui.rowIndx });;
                });
        }
    }
  ],
  editable: true,           
  title: 'Links',
  hwrap: false,
  numberCell: { show: false },
  toolbar: {
    items: [
      { type: 'button', cls: 'two_em', icon: 'ui-icon-plus', listener:
        { "click": function (evt, ui) {
            var rowIndx = grid.addRow({ rowData: {
              PurposeCode: $('#PurposeCode').val()
            }});
            grid.goToPage({ rowIndx: rowIndx });
            grid.editFirstCellInRow({ rowIndx: rowIndx });
          }
        }
      },
      { type: 'button', cls: 'two_em', icon: 'ui-icon-arrowrefresh-1-e',
        listener:
          { "click": function (evt, ui) { grid.refreshDataAndView(); }
          }
      },
      {
        type: "<span class='saving'>Saving...</span>"
      }
    ]
  },
  postRenderInterval: -1,
  trackModel: { on: true },
  change: function (evt, ui) {

    var grid = this;

    if (grid.isDirty() && grid.isValidChange({allowInvalid: true}).valid) {

      var changes = grid.getChanges({ format: 'byVal', all: false });
      if (changes.addList) {

        for (var i = 0; i < changes.addList.length; i++) {
          changes.addList[i].LinkedFileId = $('#Id').val();
          if (changes.addList[i].PurposeCode === undefined)
            changes.addList[i].PurposeCode = $('#PurposeCode').val();
        }
          $.ajax({
              url: "ajax_table_dml.php",
              data: {
                TableName: 'LinkedFileEntity',
                list: JSON.stringify({
                  addList: changes.addList,
                  updateList: changes.updateList,
                  deleteList: changes.deleteList
                })
              },
              dataType: 'json',
              async: true,
              beforeSend: function(jqXHR, settings) {
                $('.saving', grid.widget()).show();
              },
              success: function(changes) {
                grid.commit({ type: 'add', rows: changes.addList});
                grid.commit({ type: 'update', rows: changes.updateList});
                grid.commit({ type: 'delete', rows: changes.deleteList});
              },
              complete: function() {
                $('.saving', grid.widget()).hide();
              }
          });

      }
     
    }

  }
};

Thanks for reviewing my issue.

[paramvir]

I don't see anything wrong with the posted code. Is there more code?

Mentioned error can arise if trackModel.dirtyClass has been unset. Have you set trackModel with option method e.g., grid.option( "trackModel", {....} ); somewhere else in your code or change default values of trackModel.

Try to replace trackModel: { on: true } with trackModel: { on: true, dirtyClass: 'pq-cell-dirty' } in pqGrid initialization options.

What is the jQuery/ jQueryUI versions you have been using. Please try to use latest versions.

Please share a complete test case as attachment if the error is not resolved.

[gblawler]

Try to replace trackModel: { on: true } with trackModel: { on: true, dirtyClass: 'pq-cell-dirty' } in pqGrid initialization options.

That did it, simply putting the dirtyClass specific on there.

Also, I do not think that I am changing trackModel anywhere else in the code, it's only initialized up front.

Thanks for your support!