问题
I am getting an "SCRIPT438: Object doesn't support property or method 'formatCurrency'"" error when trying to format the currency for cells in a jQuery datatable using the jQuery formatCurrency library.
Code: jQuery DataTable initialisation:
var oTable = $('#tblTest').dataTable({
"bFilter": false,
"bInfo": false,
"aoColumns": [{ "bVisible": false }, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
"aaSorting": [[0, 'desc', 1]],
"bScrollInfinite": true, //this property disables pagination
"sScrollY": "230px",
"sScrollX": "940px",
"fnCreatedRow": function (nRow, aData, iDataIndex) {
RefreshGrid();
}
});
function RefreshGrid() {
var nRow = $('#tblTest').dataTable().fnGetNodes();
for (var i = 0; i < nRow.length; i++) {
var Total = (nRow[i].children[6].children[0].innerHTML * nRow[i].children[7].children[0].innerHTML).toFixed(2);
$("input[id$='hfFormat']").val(Total);
var unformatted = $("input[id$='hfFormat']").val();
var formatted = $("input[id$='hfFormat']").val(unformatted).formatCurrency().val();
nRow[i].children[8].children[0].innerHTML = formatted; //Total;
var Veriance = Total - nRow[i].children[11].children[0].value;
nRow[i].children[13].children[0].innerHTML = Veriance.toFixed(2);
nRow[i].children[9].children[0].disabled = true; //CrNo
nRow[i].children[10].children[0].disabled = true; //Allocate
nRow[i].children[11].children[0].disabled = true; //CrAmount
nRow[i].children[14].children[0].disabled = true; //Accept Veriance
nRow[i].children[15].children[0].disabled = true; //Edit
nRow[i].children[10].children[0].checked = false; //Allocate
nRow[i].children[14].children[0].checked = false; //Accept Veriance
nRow[i].children[15].children[0].checked = false; //Edit
nRow[i].style.backgroundColor = "";
if (nRow[i].children[12].children[0].defaultValue == "RejectedReturn") {
nRow[i].style.backgroundColor = "#FFEDE6";
}
else if (nRow[i].children[12].children[0].defaultValue == "CompleteWithVariance") {
nRow[i].children[15].children[0].disabled = false; //Edit
nRow[i].children[14].children[0].checked = true; //Accept Verianc
nRow[i].style.backgroundColor = "#D1D1D1";
}
else if (nRow[i].children[12].children[0].defaultValue == "Complete") {
nRow[i].children[15].children[0].disabled = false; //Edit
nRow[i].children[10].children[0].checked = true; //Allocate
nRow[i].style.backgroundColor = "#D1D1D1";
}
else if (nRow[i].children[12].children[0].defaultValue == "Outstanding") {
nRow[i].children[9].children[0].disabled = false; //CrNo
nRow[i].children[10].children[0].disabled = false; //Allocate
nRow[i].children[11].children[0].disabled = false; //CrAmount
nRow[i].children[14].children[0].disabled = false; //Accept Veriance
}
else if (nRow[i].children[12].children[0].defaultValue == "Partial") {
nRow[i].children[9].children[0].disabled = false; //CrNo
nRow[i].children[10].children[0].disabled = false; //Allocate
nRow[i].children[11].children[0].disabled = false; //CrAmount
nRow[i].children[14].children[0].disabled = false; //Accept Veriance
}
}
}
The same approach worked in other web pages but the only difference here is that RefreshGrid() is being called from the fnCreatedRow function whereas in the other instances it was called from the fnRowCallback and fnFooterCallback functions. The "unformatted" value will be present in the hidden field.
回答1:
I am unfamiliar with the formatCurrency library, but it looks like you may be attempting to call it on a string in this line:
var formattted = $("input[id$='hfFormat']").val(unformatted).formatCurrency().val();
This line also has a typo in it that I believe is a bug:
var formattted = ...
should be
var formatted = ....
Try changing this like to:
$("input[id$='hfFormat']").val(unformatted);
$("input[id$='hfFormat']").formatCurrency();
var formatted = $("input[id$='hfFormat']").val();
Generally speaking, and though it is not required, it is usually better to NOT chain your method calls, as it gets harder to read, harder to debug, and easier to make mistakes.
Also, consider setting your reused jQuery objects (selected elements) to variables, either globally or locally in a function, based on the scope in which they are to be used. Everytime jQuery hits a selector, it has to search the document to re-find the element(s) to add to the object/collection. This requires a LOT of overhead, which you can cut down by setting selectors that you have already found to be variables. The same goes for the use of $(this), as wrapping it with $() makes it a jQuery object, which is, essentially, a selector, causing jQuery to search the document for the element that matches this.
UPDATE:
Also, check out this answer which demonstrates and explains the calling of the toNumber method (included in the formatCurrency plugin), before calling .formatCurrency(). I have repeated this example, below:
// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();
回答2:
This is because val() returns you string value, but you should pass input to format function ()
//wrong
var formattted = $("input[id$='hfFormat']").val(unformatted).formatCurrency().val();
//right
var input = $("input[id$='hfFormat']");
input.val(unformatted);
var formatted = input.formatCurrency().val();
This fiddle demonstrate my point
回答3:
Retrieve the calculated value, store it to the input field, format it, retrieve it back to a new variable.
var Total = (nRow[i].children[6].children[0].innerHTML * nRow[i].children[7].children[0].innerHTML).toFixed(2);
$("input[id$='hfFormat']").val(Total);
$("input[id$='hfFormat']").formatCurrency();
var formatted = $("input[id$='hfFormat']").val();
回答4:
Turns out the problem was with duplicated jquery library scripts: on the page and a user control on the page. I moved the script reference to the Master page and removed from the Child pages and controls to avoid the duplication. Thanks for the assistance guys!
来源：https://stackoverflow.com/questions/15952906/script438-object-doesnt-support-property-or-method-formatcurrency