Adding rows with buttons slow under FireFox
Adding rows with buttons slow under FireFox
Hello, I am having some serious issues with one of my datatables in Firefox exclusively. What I am doing is adding multiple rows to the table from a webservice when a dropdown selection is made. The problem occurs when I try to add JQuery buttons with icons to those rows. Here is the code:
[code]
//Callback that makes jquery buttons
"fnRowCallback": function (nRow)
{
//Finds the anchor tag in the table and assigns its click event to delete that row.
$(nRow).find('a').unbind().button().click(function ()
{
dataTable.fnDeleteRow(nRow, null);
});
return nRow;
},
$.ajax(
{
type: "POST",
url: XXXXXXX,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result)
{
var count = result.d.length;
for (var i = 0; i < count; i++)
{
dataTable.fnAddData(
[
result.d[i].FloorID,
result.d[i].Name,
$("#genderDD option:selected").text(),
"Remove"
]);
}
},
error: function (result)
{
//Error
}
});
[/code]
This code works in Firefox, although it is slightly slower than Chrome or IE. However, there is a massive slowdown in Firefox if I try to add icons to the buttons in the rows like this:
[code]
"fnRowCallback": function (nRow)
{
//Finds the anchor tag in the table and assigns its click event to delete that row.
$(nRow).find('a').unbind().button(
{
icons: { primary: 'ui-icons-closethick' }
}).click(function ()
{
dataTable.fnDeleteRow(nRow, null);
});
return nRow;
},
[/code]
It takes Firefox 1min 29sec to execute this while Chrome and IE do it in less than 2 seconds. There are only 105 rows coming back from the webservice. Can someone explain what is going on here?
.
[code]
//Callback that makes jquery buttons
"fnRowCallback": function (nRow)
{
//Finds the anchor tag in the table and assigns its click event to delete that row.
$(nRow).find('a').unbind().button().click(function ()
{
dataTable.fnDeleteRow(nRow, null);
});
return nRow;
},
$.ajax(
{
type: "POST",
url: XXXXXXX,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result)
{
var count = result.d.length;
for (var i = 0; i < count; i++)
{
dataTable.fnAddData(
[
result.d[i].FloorID,
result.d[i].Name,
$("#genderDD option:selected").text(),
"Remove"
]);
}
},
error: function (result)
{
//Error
}
});
[/code]
This code works in Firefox, although it is slightly slower than Chrome or IE. However, there is a massive slowdown in Firefox if I try to add icons to the buttons in the rows like this:
[code]
"fnRowCallback": function (nRow)
{
//Finds the anchor tag in the table and assigns its click event to delete that row.
$(nRow).find('a').unbind().button(
{
icons: { primary: 'ui-icons-closethick' }
}).click(function ()
{
dataTable.fnDeleteRow(nRow, null);
});
return nRow;
},
[/code]
It takes Firefox 1min 29sec to execute this while Chrome and IE do it in less than 2 seconds. There are only 105 rows coming back from the webservice. Can someone explain what is going on here?
.
This discussion has been closed.
Replies