Apex Code Development You need to sign in to do that
Don't have an account?
BrianWK Jquery math function on visualforce page returning bad values
Ok,
So I've been using a controller to do a bunch of math functions on Inputfields on my page. The response of the page has degraded quite a bit so I decided to move my math functions to jquery.
So I'm starting with my simpliest formula where I have an inputfield for Unit Quantity, Unit Price, and Total Amount Paid. So I created this function:
<script type="text/javascript">
$j = jQuery.noConflict();
function jsCalculate(){
var UQ = document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUQ.InputUQ}').value;
var UP = document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUP.InputUP}').value;
var P = UQ * UP;
document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiTAP.InputTAP}').value = P;
}
</script>
So Here's what I'm having issues with. If I set the InputTAP value to UQ or to UP i get the correct number when the function is called. However when I try to assign it to P or do the math directly in the value set (InputTtap.value = UQ * UP)
I get an "NaN" error message instead of the product.
What am I doing wrong here? The function is being called and I'm getting the right values from my input fields but the math portion seems to fail.
Nevermind -- figured it out.
I loaded this up in firebug.
What was happening was the inputfield for UnitPrice was returning as "2,100.00"
That broke it. First I tired using ParseInt, but the comma in the currency causes issues. So here's the change:
<script type="text/javascript"> $j = jQuery.noConflict(); function jsCalculate(){ var UQ = document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUQ.InputUQ}').value; var UP = parseint(document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUP.InputUP}').value.replace(',','')); var P = parseUQ * parseUP; document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiTAP.InputTAP}').value = P; return false; } </script>All Answers
Nevermind -- figured it out.
I loaded this up in firebug.
What was happening was the inputfield for UnitPrice was returning as "2,100.00"
That broke it. First I tired using ParseInt, but the comma in the currency causes issues. So here's the change:
<script type="text/javascript"> $j = jQuery.noConflict(); function jsCalculate(){ var UQ = document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUQ.InputUQ}').value; var UP = parseint(document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiUP.InputUP}').value.replace(',','')); var P = parseUQ * parseUP; document.getElementById('{!$Component.page.theform.ContractProductsBlock.pbs.pbsiTAP.InputTAP}').value = P; return false; } </script>Just as a reminder, if you're having a problem with parsing the number, keep in mind that locale settings will affect your number: some locales will show the number as "2 100,00". You should consider using a pattern matching sequence so that you don't have that issue. Even if your entire company is supposed to use the English (US) locale, you'll eventually have a user that will break your code by changing their locale.
SfdcFox - Thanks for that information. I wasn't aware that is an issue!
I've only just started working with Javascript/jquery. I've always been a Apex & Visualforce guy. I've only entered into the js libraries because the response times between controller and browser renders have seemed to slow down over the last many projects. It's very frustrating when users have to wait a few seconds, when it's something as simple as a calculation as users input new values.
You recommended using a pattern matching sequence. Do you have a sample or one you would recommend I use?
I believe you need a pattern similar to the following:
(-|+)?\D?(\d{1,3}(\D?))*(\D?\d*)Where (-|+)? represents an optional plus or minus sign, \D? represents an optional non-digit (0-9) character, (\d{1,3}(\D?))* represents groups of numbers to the left of the decimal point, and (\D?\d*) represents the decimal notation at the end of the pattern. You may need to experiment to come up with the precise regular expression that you need.
When you use a regular expression, it matches by a set of "groups", which in JavaScript are limited to numerical references. Group zero is the group that represents the entire matched string, while groups indexed at number 1 onwards represents a fragment that shows what part a pattern matches inside of paranthesis, called a "capture group".
The net result should be that group 1 will contain the polarity sign (negative or positive), group 2 to group n-1 (where n is the number of groups matched) should contain the significant digits to the left of the decimal point, which may be any other character, and group n (the last group in the set) should be the fractional part of the number.
There's a few other tricks you might look at built in to standard Visualforce (try it out in a new page). actionRegion can reduce the round-trip time by creating a partial view state that loads much faster than the full view state (and thus, completes its operation in a fraction of the time). @RemoteAction, called JavaScript Remoting, exposes your class methods as a JavaScript function. If you can use it to meet your needs, it can reduce execution time by up to 80% over traditional server-controlled AJAX functions. I've seen a demo of this, but it's not out until Summer '11, so you'll have to try it out in Sandbox.
can you post a more sample of this code. I have a similar requirement.
please give me some inputs.