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.

user2248185
  • 23
  • 2
  • 7

4 Answers4

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();
Community
  • 1
  • 1
Zachary Kniebel
  • 4,686
  • 3
  • 29
  • 53
  • thanks for the spelling correction, I tried your suggestion, no change. It could be the chaining you alluded to. – user2248185 Apr 11 '13 at 15:56
  • 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. – user2248185 Apr 12 '13 at 07:34
  • 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. – Zachary Kniebel Apr 12 '13 at 15:32
  • 1
    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! – user2248185 Apr 15 '13 at 11:02
  • No problem - It's what we're here for :) – Zachary Kniebel Apr 15 '13 at 13:33
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

Tommi
  • 3,199
  • 1
  • 24
  • 38
  • 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? – Tommi Apr 11 '13 at 19:35
  • 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. – user2248185 Apr 12 '13 at 07:38
  • 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. – Tommi Apr 12 '13 at 08:24
  • 'console.log($.fn.formatCurrency);' returns 'undefined'so I think that means the plugin is not loading, just can't figure out why. – user2248185 Apr 12 '13 at 14:30
  • Well, without page code I can't say more, but at least you got a direction. – Tommi Apr 12 '13 at 14:33
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();
DaveB
  • 9,470
  • 4
  • 39
  • 66
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!

user2248185
  • 23
  • 2
  • 7