asked on

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.

Rob

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

mmoore

ASKER

Thanks Rob,
Here is the complete page to give you some context.
commissionrateadjustment-view.jsp.txt

Rob

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?

mmoore

ASKER

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

Rob

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.

Rob

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

mmoore

ASKER

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.

mmoore

ASKER

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--

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mmoore

ASKER

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

Rob

Glad you got something you can work with. Happy I could help.
Cheers,
Rob