jQuery Grid Plugin - jqGrid

I have a site I am building which has variable parameters for the jqGrid to use.  In IE8 it handles the click events correctly, but in Firefox, the Add button doesn't fire, the Delete button doesn't file and neither does it sort.  Also in both browsers the "Alert" caption shows continuously even though nothing has been clicked.

I have changed none of the defaults.  Here is my code:

*********************************************************************

$(document).ready(function() {

var grid = jQuery("#" + tblName).jqGrid({

url: svcName + "/getRows",

datatype: 'json',

mtype: 'POST',

loadonce: true,

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

serializeGridData: function(postData) {

return JSON.stringify(postData);

},

jsonReader: {

root: function(obj) { return obj.d.rows; },

page: function(obj) { return obj.d.page; },

total: function(obj) { return obj.d.total; },

records: function(obj) { return obj.d.records; }

}, //jsonReader

columns: cols,

colModel: model,

onSelectRow: function(id) {

if (id && id !== lastSel) {

if (lastSel == -1) test();

if (canEdit()) {

// cancel editing of the previous selected row if it was in editing state.

// jqGrid hold intern savedRow array inside of jqGrid object,

// so it is safe to call restoreRow method with any id parameter

// if jqGrid not in editing state

grid.jqGrid('saveRow', lastSel);

} //if canEdit()

lastSel = id;

} //if id!=lastSel

lastSel = id;

},

ondblClickRow: function(id, ri, ci) {

if (canEdit()) {

// edit the row and save it on press "enter" key

grid.jqGrid('editRow', id, true);

lastSel = id;

}

},

editurl: svcName + '/updateRow',

pager: pagerID,

rowNum: 5000, //MAX rows to display?

gridview: true,

hidegrid: false,

shrinkToFit: true,

scroll: true,

altRows: true,

altclass: 'odd' + tblName,

toolbar: [true, 'both'],

footerrow: false,

height: gridHeight,

caption: caption

}).jqGrid('navGrid', '#' + pagerID, { add: false, edit: false, view: false, del: false, refresh: false, search: false })

.navButtonAdd('#' + pagerID,

{

caption: "Add  ",

buttonicon: "ui-icon-add",

onClickButton: function() {

var itemArray = "{";

for (var i = 0; i < cols.length; i++) {

if (cols[i].toLowerCase() == "id") {

itemArray += cols[i] + ":'-1',";

}

else

itemArray += cols[i] + ":'',";

}

//remove last comma from itemArray

itemArray = itemArray.substring(0, itemArray.length - 1);

var total = grid.getGridParam('records');

grid.addRowData(-1, itemArray, 'last'); // add a new row with empty data

lastSel = -1;

grid.jqGrid('editRow', -1, true);

//jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

},

position: "last",

cursor: "pointer"

})

.navButtonAdd('#' + pagerID,

{

caption: " Del",

buttonicon: "ui-icon-del",

onClickButton: function(id) {

alert("Deleting Row: " + lastSel)

//put ajax call in here to delete the row - LastSel gives the row keyname

},

position: "last",

cursor: "pointer"

});

});//document.ready

*********************************************************************

The Add button works, but I get and error 500 from the webservice when I try to save the insert.  Because the buttons do not work in FireFox I can't use Firebug to figure out what is being sent.  As you can tell, I am a complete newbie to both jQuery and jqGrid, so thanks for the help on this.

Geoff