How to use jQuery to reference a javascript variable

I've installed the jQuery currency formatter plugin found here. https://code.google.com/p/jquery-formatcurrency/
The value I want formatted is in a javascript variable. This is an excerpt from a jTable script:

                dollarAmount: {
                    title: 'Amount',
                    width: '25%',
                    display: function (data) {
                    	//return $("#" + data.record.dollarAmount).formatCurrency();
                    	return (data.record.dollarAmount).formatCurrency();
                    	}

Open in new window


The comment is just something I tried but did not work. I've tried dozens of others too, but I can't get this to work.
I know I am getting into the formatCurrency function because Chrome's Developer Tools shows me the function source code.
TIA for any help here.
LVL 3
mmooreAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Without seeing more code of where the variables are coming from etc I'm only guessing.  Do you have a link to the page?

You should add in console.dir() calls to see what the data object contains (it will show up in the console of the dev tools).  What are the results of the below?

dollarAmount: {
                    title: 'Amount',
                    width: '25%',
                    display: function (data) {
                         console.dir(data);
                    	console.dir(data.record.dollarAmount);
                    	return (data.record.dollarAmount).formatCurrency();
                    	}

Open in new window

0
mmooreAuthor Commented:
Thanks Rob,
Here is the complete page to give you some context.
commissionrateadjustment-view.jsp.txt
0
RobOwner (Aidellio)Commented:
Honestly, it's no use to me as I can't test the data you're returning from "/commission/CRUDController?action=list".  I could use my own sample data but it could be your data that's the issue.

What output did you get from the console.dir() actions?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mmooreAuthor Commented:
Sorry I'm not giving you the pieces you need to solve the puzzle. "/commission/CRUDController?action=list". returns a JSON document. This is the script's web site.  : http://www.jtable.org/ 
I KNOW that at the moment of displaying, data.record.dollarAmount DOES contain the actual dollar amount that I want displayed. I know this because I did alert(data.record.dollarAmount). The problem is passing that value to the formatCurtency() function and getting a formatted value back. I am getting either null or blank back.  I'll try using the console.dir() as you suggested.
Thanks,
Mike
0
RobOwner (Aidellio)Commented:
ah ok... thanks, just needed to confirm and rule that out.  Would you mind posting a screenshot of the alert message? Unless you can tell me whether data.record.dollarAmount is already formatted in any way or is it just a float, e.g. 48522.88 or is it 48,522.88 etc.  If there's anything but a number it could be what's bombing the formatCurrency() function.  Sorry if that sounds trivial, I'm just trying to rule everything out.
0
RobOwner (Aidellio)Commented:
The issue here is that the formatCurrency() needs to act on a DOM element, not a JSON object.  You need to set it to an element and then call the function:

http://jsbin.com/huvuda/1/edit?html,js,output

$(function() {
  var data = {
    record: {
      dollarAmount: 474747728
    }
  }
  
  $("#myid").text(data.record.dollarAmount).formatCurrency();
});

Open in new window


<div id='myid'></div>

Open in new window

0
mmooreAuthor Commented:
So there is no way to jQuery directly reference a javascript variable. Okay. I'll take a moment to make some changes per your link.
0
mmooreAuthor Commented:
I think I'm close:

 <div id="Foo"></div>

                    display: function (data) {
                    	$( "#Foo" ).data("bar",data.record.dollarAmount);
                    	//return $("#Foo").data("bar");  // this returnes the unformatted dollar amount
                        return $("#Foo").data("bar").formatCurrency(); //this results in TypeError
                    	}

Open in new window

"TypeError: undefined is not a function↵    at Object.$.jtable.fields.dollarAmount.display (http://localhost:18080/commission/commissionRateLevelAdjustment.do:490:54)↵    at c.widget._getDisplayTextForRecordField

--snip--
0
RobOwner (Aidellio)Commented:
So there is no way to jQuery directly reference a javascript variable.
That's not true, just is the case for this jQuery add-on.  The function expects a DOM element to act on and keeps the result private in this case.

A workaround in this case is to set the value to a hidden element:

display: function (data) {
                          $( "#Foo" ).text(data.record.dollarAmount);
                        $("#Foo").formatCurrency();
                        return $("#Foo").text(); // this has the formatted value
                          }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mmooreAuthor Commented:
Hi Rob,
I actually came up with this after trying what seems to be a thousand variations:
                    display: function (data) {
                    	document.getElementById("Foo").textContent=data.record.dollarAmount;
                        $("#Foo").formatCurrency();
                        return document.getElementById("Foo").innerText;
                    	}

Open in new window

Yours is a little more concise so I'll go with it. Thanks so much for your help!
Mike
0
RobOwner (Aidellio)Commented:
Glad you got something you can work with.  Happy I could help.
Cheers,
Rob
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.