0

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.

4 Answers 4

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(); 
Sign up to request clarification or add additional context in comments.

5 Comments

thanks for the spelling correction, I tried your suggestion, no change. It could be the chaining you alluded to.
i then get a "SCRIPT438: Object doesn't support property or method 'toNumber'" error. I would have said the selector cannot find the hidden field object but when I use it to get the value of the hidden field, it is returning the value.
The next suggestion that I have for you is to go back and line-by-line check the syntax of all of the JS running on the page. SCRIPT438 errors are often caused by invalid syntax errors that are elsewhere in the script.
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 direction!
No problem - It's what we're here for :)
0

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

5 Comments

This is strange, I experimented in fiddle with this plugin and I can't get it broken. Even when I try to format NaN, false, undefined, null, random strings it fall gracefully and return untouched value. I don't really think the issue is in plugin itself, at least if you use latest version. Do you have complete page where issue reproduces somewhere in public?
unfortunately I don't have a page in public where this is happening. what's strange is i can get the value in the hidden field using the selector but when I now try to format (asNumber,toNumber,formatCurrency), the error pops up.
Is there any chance your plugin is not loaded yet when you call it or not loaded at all due error? Try to call console.log($.fn.formatCurrency); right before formatCurrency() execution. Console must show you a few strings of minified code.
'console.log($.fn.formatCurrency);' returns 'undefined'so I think that means the plugin is not loading, just can't figure out why.
Well, without page code I can't say more, but at least you got a direction.
0

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(); 

1 Comment

Same suggestion as @ZacharyKniebel above, no change :-(
0

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!

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.