Fingers too quick for Javascript?

[pepe]

Hello,

I have a table with 3 columns I'll call columns A, B and C. In column
A I have denominations (bill names such as $1, $2, $5, etc.). In
column B I enter the number of bills I have (not the $ amount but the
count of bills). Column C receives the calculated amount by a
Javascript function called 'updateDenominationAmounts'.

Examples:

Column A: $1
Column B: 5
Column C: $5.00

Column A: $5
Column B: 2
Column C $10.00

My original table has 'denominations' from 1 cent up to $100 but the
example below only has 2 rows, for $1 and $5 bills.

The problem we are seeing is that when values are entered very rapidly
by, for example, entering a 1 in all fields (1 - tab - 1 - tab...)
during testing sometimes some of the calculated fields in column C
don't get updated. This problem does never occur if the pace of
entering data is 'normal'.

The following is the full code of the Javascript function being
invoked (I am not a Javascript expert so I'm sure there might be
better ways of making this work) and a sample of the fields in the
table involved in the process.

Any idea why this might be happening?

Thank you very much.

<script type="text/javascript">
function updateDenominationAmounts(quantity_element, denomination_id,
denomination_value, denomination_multiplier) {
var precision = denomination_multiplier.toString().length -
denomination_multiplier.toString().lastIndexOf('.') - 1;
var initial_value = parseFloat($('denomination_id_' +
denomination_id + '_amount').value);
var value = quantity_element.value * denomination_value *
denomination_multiplier;
if (isNaN(value)) {
value = 0;
}

$('denomination_id_' + denomination_id + '_amount').value =
parseFloat(value).toFixed(precision);

new Effect.Highlight('denomination_id_' + denomination_id +
'_amount', {
startcolor: "#FFFFFF",
endcolor: "#5E918D",
restorecolor: "#FFFFFF"
});

$('denominations_amount').value =
(
parseFloat($('denominations_amount').value) -
parseFloat(initial_value) +
parseFloat($('denomination_id_' + denomination_id +
'_amount').value)
).toFixed(precision);
new Effect.Highlight('denominations_amount', {
startcolor: "#FFFFFF",
endcolor: "#5E918D",
restorecolor: "#FFFFFF"
});
} // function updateDenominationAmounts()
</script>

<table>
<tr>
<th>Denomination</th>
<th>Count</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>
<input class="number"
id="bank_bank_denominations_attributes_0_quantity"
name="bank[bank_denominations_attributes][0][quantity]"
onkeyup="updateDenominationAmounts(this, 1, 1, 0.01);" size="30"
type="text" />
</td>
<td>
<input class="number" disabled="disabled"
id="denomination_id_1_amount" name="denomination_id_1_amount"
type="text" value="0.00" />
</td>
</tr>
<tr>
<td>$5</td>
<td>
<input class="number"
id="bank_bank_denominations_attributes_1_quantity"
name="bank[bank_denominations_attributes][1][quantity]"
onkeyup="updateDenominationAmounts(this, 2, 5, 0.01);" size="30"
type="text" />
</td>
<td>
<input class="number" disabled="disabled"
id="denomination_id_2_amount" name="denomination_id_2_amount"
type="text" value="0.00" />
</td>
</tr>
<tr>
<th>Total</th>
<th></th>
<th><input class="number" id="denominations_amount"
name="denominations_amount" readonly="readonly" type="text"
value="0.00" /></th>
</tr>
</table>

 

[pepe]

Did you try onchange instead of onkeyup?
Hi stefan,

It's been a long time since I wrote the code but I kind of remember
that in some instances the onchange would not work. I haven't tested
this so I could be wrong but I think I remember that if you change the
value of a field and never leave it (by tabbing or clicking on another
field) the onchange event will not fire.

 

[Gregor Kofler]

Am 2011-03-26 02:47, pepe meinte:

Hi stefan,

It's been a long time since I wrote the code but I kind of remember
that in some instances the onchange would not work. I haven't tested
this so I could be wrong but I think I remember that if you change the
value of a field and never leave it (by tabbing or clicking on another
field) the onchange event will not fire.

Indeed, with input and textarea elements the change event fires, when
the elements loses its focus.

Regarding your original posting and problem: It's a PITA to read, since
the indentation with tabs doesn't work with newsreaders (and 72
characters per row).
Have you tried your example without the "effects"? Have you checked the
console - are any errors reported? Perhaps the library in use chokes on
the "stacked up" effects, and the script aborts, before the last input
element can be handled.

Gregor

 

[PStechPaul]

"Gregor Kofler" wrote in message

Indeed, with input and textarea elements the change event fires,
when the elements loses its focus.

Have you tried your example without the "effects"? Have you
checked the console - are any errors reported? Perhaps the library
in use chokes on the "stacked up" effects, and the script aborts,
before the last input element can be handled.

It may help to use a delay in the update routine, or set a timer to run the
updater a little later. This could also be used to slow down the inputs, but
that might be annoying. Here is some info:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

I've also seen many websites that use an "update" or "calculate" button.

You also might try the "onDirty" event:
http://answers.yahoo.com/question/index?qid=20090427100114AAmwN2y

or "onBlur":
http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html

Paul

 

[Thomas 'PointedEars' Lahn]

It may help to use a delay in the update routine, or set a timer to run
the updater a little later. This could also be used to slow down the
inputs, but that might be annoying. Here is some info:
http://www.elated.com/articles/javascript-timers-with-settimeout-and
setinterval/

"Level: Intermediate", but still not capable of using qualified and Function
references, still repeating document.getElementById() calls?

Do not consider this guy's writing until he deems himself an "expert" (which
equals "beginner" in my scale). The fact that he is recommending Flanagan's
provably clueless book does not bode well for his position in the learning
curve, too.

You also might try the "onDirty" event:
http://answers.yahoo.com/question/index?qid=20090427100114AAmwN2y

or "onBlur":
http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html

More utter nonsense. Don't.


PointedEars

 

[Gregor Kofler]

Am 2011-03-26 20:00, PStechPaul meinte:

"Gregor Kofler" wrote in message


It may help to use a delay in the update routine, or set a timer to run
the updater a little later. This could also be used to slow down the
inputs, but that might be annoying. Here is some info:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Why not suggest a reasonable ressource like
https://developer.mozilla.org/en/DOM/window.setTimeout

I've also seen many websites that use an "update" or "calculate" button.

You also might try the "onDirty" event:
http://answers.yahoo.com/question/index?qid=20090427100114AAmwN2y

It would be the "dirty" event. Anyway, I've never heard of that being
supported in any reasonable browser (according to Google it is supported
in Access-VBA...) Dunno what the bloke in the above link is talking
about (likely he/she doesn't know either...)

or "onBlur":
http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html

And what would that be good for? Then he could resort to the "change"
event just as well. And the linked source states things like
"Events are associated with HTML tags"...

Gregor

 

[pepe]

Regarding your original posting and problem: It's a PITA to read, since

the indentation with tabs doesn't work with newsreaders (and 72
characters per row).

Sorry, I knew it would happen but there isn't much I could do about
it.

Have you tried your example without the "effects"?

Nope. I will give that a try, it's probably the only thing I didn't
think about, as obvious as it might seem.

Have you checked the
console - are any errors reported?

No errors.

Perhaps the library in use chokes on
the "stacked up" effects, and the script aborts, before the last input
element can be handled.

It does not abort. As it happens it is usually the middle rows the
ones that have the the problem. I am starting to think that the
effects might be the reason why this is happening.

Thanks for the input.

 

[pepe]

It may help to use a delay in the update routine, or set a timer to run the

updater a little later. This could also be used to slow down the inputs, but
that might be annoying. Here is some info:http://www.elated.com/articles/javascript-timers-with-settimeout-and-...

Delaying the users would be a no-no.

I've also seen many websites that use an "update" or "calculate" button.

This was actually my plan B. If all else fails I would force the user
to click a button to update the amounts and keep going.

You also might try the "onDirty" event:http://answers.yahoo.com/question/index?qid=20090427100114AAmwN2y

Never heard of that one before. Will check it out.

or "onBlur":http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents....

onBlur will not work if the user does not leave the field(s).

Thanks!

 

[pepe]

"Level: Intermediate", but still not capable of using qualified and Function
references, still repeating document.getElementById() calls?

Do not consider this guy's writing until he deems himself an "expert" (which
equals "beginner" in my scale).  The fact that he is recommending Flanagan's
provably clueless book does not bode well for his position in the learning
curve, too.



More utter nonsense.  Don't.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

Thanks for the input

 

[pepe]

You also might try the "onDirty" event:

It would be the "dirty" event. Anyway, I've never heard of that being
supported in any reasonable browser (according to Google it is supported
in Access-VBA...) Dunno what the bloke in the above link is talking
about (likely he/she doesn't know either...)

Thanks, that saves me some time.

So I guess it is either removing the events and see if it works and if
it doesn't force the user to click a button to trigger the
calculations.

Thank you to everybody for your help.