Log in

View Full Version : Display 1 as 001 in numberspinner


Java Developer
12-30-2008, 06:06 AM
Hi,

I was working on a dojo number spinner. But this request is more for a javascript which would alter the display based on any changes as -

"1" would be "001" and so on
"10" would be "010" and so on till 999.

This is the html so far.
************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.NumberSpinner"
value="0"
smallDelta="1"
constraints="{min:1,max:1000,places:0}"
maxlength="20"
id="integerspinner2">
</body></html>
************************************
jscheuer1
12-30-2008, 06:52 AM
You want something like (assumes x is a number from 0 to 999):


x = x < 10? '00' + x : x < 100? '0' + x : x;

Or another way:


function to3P(n){
return (n/100).toFixed(2).replace(/\./, '');
};
Java Developer
12-30-2008, 08:36 AM
Thanks John...

Solved part of the problem but that leaves me with two issues. Not sure if both are javascript ones though but here goes..

1. The code below solves part of the problem in that I get the display as required (001 instead of 1 and so on). However, it starts counting from one again when I press the keyboard arrows.

<input dojoType="dijit.form.NumberSpinner"
onkeyup="getonkeyup();"
smallDelta="1"
constraints="{min:0,max:100,places:0}"
maxlength="3"
style="width:60px; font-family:Arial; color: #708090;"
id="revisionSpinControl"
name="revisionSpinControl"
>

function getonkeyup() {
var currentValue = document.getElementById('revisionSpinControl').value;
alert("currentValue = "+currentValue);
if(currentValue.length == 1) {
document.getElementById('revisionSpinControl').value = '00'+currentValue;
}
if(currentValue.length == 2) {
document.getElementById('revisionSpinControl').value = '0'+currentValue;
}
}

2. How to capture mouse scroll events. Since the spinner can be incremented/decremented using mouse scroll also.

Thanks !!
jscheuer1
12-30-2008, 04:32 PM
I've used this in the past:

http://adomas.org/javascript-mouse-wheel/

with minor modification for mouse wheel events. I think it works as is though.

As to why your script starts over at 1, I'm not sure. I don't believe that the code in your post is directly responsible though it may make the value of the input unsuitable for whatever routine you are using to calculate the increments.

Could you post a link to a version with this problem and a link to the earlier version that did not?
Java Developer
12-31-2008, 04:42 AM
I've used this in the past:

http://adomas.org/javascript-mouse-wheel/

with minor modification for mouse wheel events. I think it works as is though.


Thanks, will update as soon as I have made some progress on this one.



it may make the value of the input unsuitable for whatever routine you are using to calculate the increments.


I guess you have a point there, I am trying to find out where the inputs fails right now


Could you post a link to a version with this problem and a link to the earlier version that did not?

I don't have a link but I have converted the code to html (similar to what is present in dojo websites). It works with the mouse wheel but it will not work on keyboard arrows since I have put in the broken code for that one.

*******************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.NumberSpinner"
onkeyup="getonkeyup();"
value="0"
smallDelta="1"
constraints="{min:1,max:1000,places:0}"
maxlength="20"
regExpGen="regExpressionChecker"
id="integerspinner">
</body>
<script type="text/javascript">
function getonkeyup() {
var currentValue = document.getElementById('integerspinner').value;
if(currentValue.length == 1) {
document.getElementById('integerspinner').value = '00'+currentValue;
}
if(currentValue.length == 2) {
document.getElementById('integerspinner').value = '0'+currentValue;
}
}

function regExpressionChecker() {
// {n} Match exactly n times
// return "\\d{3}";
// + Match 1 or more times
return "\\d+";
// * Match 0 or more times
return "\\d*";
}
</script>
</html>
*******************************************
jscheuer1
12-31-2008, 08:47 PM
I think you need to look here:

http://dojotoolkit.org/forum

as the problem is in the validation routine(s) of the dojo code with which I am unfamiliar, in fact never heard of it before this thread. If they cannot help you, let me know. After New Years I may take a crash course in this code, but I'm not making any promises. I'd imagine that someone in one of the forums listed at the above link must be able to help though.

You should start there as you started here, simply by asking how to get the 00# type format.
Java Developer
01-02-2009, 03:56 AM
Hey thanks John for the support.

I too am taking my first baby steps into the world of dojo's. I am familiar with JQuery land, when someone told me that the widget library of dojo's is pretty strong so I thought I should experiment a little.

Tried to resolve dojo issues with javascript (by the post in this forum) but like you said it would be a better bet if I used dojo's library and validation to resolve my problem.

I already have a thread running in dojo land when I started working with dojos

Since you are interested -
http://www.nabble.com/Number-Spinner-display-to21228103.html
http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/number-spinner

Again, thanks for volunteering to help.