Why "Addrow" event in jqxgrid is fired several times??

[jpereraParticipant]

Hello everybody,
I have a function in a grid that it is adding new items using a popup window, the problem is that when I add a new row for first time the item is inserted in the database correctly but in the grid it show me a new row empty, the second time that I add new one, the grid fired several times two or three times the even addrow wich insert several times the item in the database.
Please I need your help with this issue, thank you very much!!
I copied the code:
function LoadDuressCode() {
$.ajax({
type: “POST”,
url: “/Passcode/LoadDuressCode”,
data: {},
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
var source = {
datatype: “json”,
datafields: [
{ name: ‘Comment’, type: ‘string’ },
{ name: ‘DuressCodeM’, type: ‘string’ },
{ name: ‘SeqNum’, type: ‘int’ },
{ name: ‘SiteName’, type: ‘string’ },
{ name: ‘SiteNum’, type: ‘int’ }
],
localdata: data,
updaterow: function (rowid, rowdata, commit) {
var rowOldData = $(‘#gvDuress’).jqxGrid(‘getrowdata’, rowid);
var params = “{” + “‘SeqNum’:” + rowOldData.SeqNum + “,” + “‘SiteName’:”,” + “‘Code’:'” + rowdata.DuressCodeM + “‘,” + “‘Comment’:'” + rowdata.Comment + “‘}”;
$.ajax({
type: “POST”,
url: “/Passcode/UpdateDuressCode”,
data: params,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
if (data == true) {
$(“#lbNotificationSuccess”).text(“Duress Code Entered Successfully”);
$(“#jqxNotificationSuccess”).jqxNotification(“open”);
commit(true);
}
else {
$(“#lbNotification”).text(“An error occured”);
$(“#jqxNotification”).jqxNotification(“open”);
commit(false);
}
}
});
//Refreshing Grid
LoadDuressCode();
},
addrow: function (rowid, rowdata, position, commit) {
var row = { Comment: $(“#tbCommentC”).val(), DuressCodeM: $(“#tbDuressCodeC”).val() };
var params = “{” + “‘Code’:'” + row.DuressCodeM + “‘,” + “‘Comment’:'” + row.Comment + “‘}”;
$.ajax({
type: “POST”,
url: “/Passcode/CreateDuressCode”,
data: params,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
if (data == true) {
$(“#lbNotificationSuccess”).text(“Duress Code Entered Successfully”);
$(“#jqxNotificationSuccess”).jqxNotification(“open”);
commit(true);
}
else {
$(“#lbNotification”).text(“An error occured”);
$(“#jqxNotification”).jqxNotification(“open”);
commit(false);
}
}
});
//Refreshing Grid
LoadDuressCode();
},
deleterow: function (rowid, commit) {
var rowOldData = $(‘#gvDuress’).jqxGrid(‘getrowdata’, rowid);
var params = “{” + “‘SeqNum’:” + rowOldData.SeqNum + “,” + “‘SiteName’:”,” + “‘Code’:'” + rowOldData.DuressCodeM + “‘,” + “‘Comment’:'” + rowOldData.Comment + “‘}”;
$.ajax({
type: “POST”,
url: “/Passcode/DeleteDuressCode”,
data: params,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
if (data == true) {
$(“#lbNotificationSuccess”).text(“Duress Code Remove Successfully”);
$(“#jqxNotificationSuccess”).jqxNotification(“open”);
commit(true);
}
else {
$(“#lbNotification”).text(“An error occured”);
$(“#jqxNotification”).jqxNotification(“open”);
commit(false);
}
}
});
//Refreshing Grid
LoadDuressCode();
},
}
$(“#tbDuressCode”).jqxInput({ placeHolder: “Enter Code…” });
$(“#tbComment”).jqxInput({ placeHolder: “Enter Comment…” });
$(“#tbDuressCodeC”).jqxInput({ placeHolder: “Enter Code…” });
$(“#tbCommentC”).jqxInput({ placeHolder: “Enter Comment…” });
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
var tooltiprenderer = function (element) {
$(element).jqxTooltip({ position: ‘mouse’, content: $(element).text() });
}
$(“#gvDuress”).jqxGrid({
width: “100%”,
source: dataAdapter,
altrows: true,
sortable: true,
selectionmode: ‘singlerow’,
pageable: true,
pagesize: 20,
columnsresize: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbuttonD” type=”button” value=”Add New” />  ‘);
container.append(‘<input id=”deleterowbuttonD” type=”button” value=”Delete Row” />’);
$(“#addrowbuttonD”).jqxButton();
$(“#deleterowbuttonD”).jqxButton();
$(“#addrowbuttonD”).on(‘click’, function () {
$(“#tbDuressCodeC”).val(”);
$(“#tbCommentC”).val(”);
var offset = $(“#gvDuress”).offset();
$(“#popupWindowDuressCreate”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
$(“#popupWindowDuressCreate”).jqxWindow(‘open’);
});
$(“#deleterowbuttonD”).on(‘click’, function () {
var selectedrowindex = $(“#gvDuress”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#gvDuress”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#gvDuress”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#gvDuress”).jqxGrid(‘deleterow’, id);
}
});
},
columns: [
{ text: ‘Duress Code’, datafield: ‘DuressCodeM’, sortable: true, groupable: true, exportable: true, rendered: tooltiprenderer, width:60},
{ text: ‘Comment’, datafield: “Comment”, sortable: true, groupable: true, exportable: true, rendered: tooltiprenderer },
{
text: ‘Edit’, datafield: ‘Edit’, width:40 ,columntype: ‘button’, cellsrenderer: function () {
return ‘Edit’;
}, buttonclick: function (row) {
editrow = row;
var offset = $(“#gvDuress”).offset();
$(“#popupWindowDuress”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
var dataRecord = $(“#gvDuress”).jqxGrid(‘getrowdata’, editrow);
$(“#tbDuressCode”).val(dataRecord.DuressCodeM);
$(“#tbComment”).val(dataRecord.Comment);
$(“#popupWindowDuress”).jqxWindow(‘open’);
}
}
]
});
//Create
$(“#popupWindowDuressCreate”).jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#CancelDuressC”), modalOpacity: 0.01 });
$(“#popupWindowDuressCreate”).on(‘open’, function () {
$(“#tbDuressCodeC”).jqxInput(‘selectAll’);
});
$(“#CancelDuressC”).jqxButton({});
$(“#btSaveDuressC”).jqxButton({});
$(“#btSaveDuressC”).click(function () {
var commit = $(‘#gvDuress’).jqxGrid(‘addrow’, null, {});
$(“#popupWindowDuressCreate”).jqxWindow(‘hide’);
});
//Edit
$(“#popupWindowDuress”).jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#CancelDuress”), modalOpacity: 0.01 });
$(“#popupWindowDuress”).on(‘open’, function () {
$(“#tbDuressCode”).jqxInput(‘selectAll’);
});
$(“#CancelDuress”).jqxButton({});
$(“#btSaveDuress”).jqxButton({});
$(“#btSaveDuress”).click(function () {
if (editrow >= 0)
{
var row = { Comment: $(“#tbComment”).val(), DuressCodeM: $(“#tbDuressCode”).val() };
var rowID = $(‘#gvDuress’).jqxGrid(‘getrowid’, editrow);
$(‘#gvDuress’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindowDuress”).jqxWindow(‘hide’);
}
});
}
});
}

[Peter StoevKeymaster]

Hi jperera,

The only possible reason is, If you bind multiple times to “click” event of your button where you call the “addrow” method. There is no other reason. I suggest you to debug your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jpereraParticipant]

Hi Peter, I copied the code in my last post, I don’t think I’m calling multiple times actually, this is the code I was wrote on the event:
$(“#btSaveDuressC”).click(function () {
var commit = $(‘#gvDuress’).jqxGrid(‘addrow’, null, {});
$(“#popupWindowDuressCreate”).jqxWindow(‘hide’);
});
this is the event onclick where I’m calling the event addrow, if I make a click only one click then only one time should the event be called…

Any help please???

Thank you

[jpereraParticipant]

Hi Peter, I’m debugging the code and it seems very weird because you are right I don’t know why the event save in the button is fired several times too, the only clue that I have it is that I’m using jqxTaps to load various partial views into each taps, I have a method onselect in the tap and I’m reloading all the page every time that you change tap, I think that maybe it’s the problem, but actually I don’t know why the event Save of the button click it is executing several times???

Thank you

[Peter StoevKeymaster]

Hi jperera,

If the event is bound one time, it will be called one time and only one row will be added. I suggest you to debug your code. We cannot find a problem on our side with addrow and this is obvious from our working demos about that functionality which are available online. So, open Chrome debugging tools and check how many times you bind to the click event and how many times you execute your LoadDuressCode function. If it’s more than 1, then you bind more than 1 time to the event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jpereraParticipant]

hi Peter,
I Will do what you are suggesting me and If I have any result I will confirm you.
Thank you.

[jpereraParticipant]

Hi Peter,
You are so right, I solve the problem removing the different calls to LoadDuressCode() function.

Thank you very much, I appreciate!!!

[Author]

Posts