Javascript returning undefined

Question

I am trying to get the value of a spinner and display its value. Here is the spinner code:

<div id="site_content">
    <div id="content">
        <h:body>
            <h:form>
                <div class="whiteSpace" />
                <p:spinner id="minutes" min="0" max="1000" value="#{printerSettings.t}" size="1">
                    <p:ajax update="NewTime" />
                    <f:validateLongRange minimum="1" maximum="1000" />
                </p:spinner>
                <h:message id="minutes2" for="minutes" style="color:red" />

and here is the javascript code that is called, when the user presses submit

function Thankyou() {
    var minuteVal = $('minutes').val(); //not finding the minutes selected
    alert(minuteVal);
    alert("Sent to the printing holding queue, you may close this app now or carry on using this app, your work will still print out ");
    //location.href = 'index.xhtml';
}

I have tried

var minuteVal = $('minutes').text();

and this returns an empty box. Thanks.

Edit

The JavaScript above is found

                </h:form>
            </h:body>
        </div>
    </div>
    <script type="text/javascript">
        .....
    </script>
</html>

at the bottom of the XHTML.

EDIT

here is the source, i don't have a clue what any of this means

In how many minutes time would you like to have your job sent to the printer ?
<div class="whiteSpace"></div>
<span id="j_idt8:minutes" class="ui-spinner ui-widget ui-corner-all">
    <input id="j_idt8:minutes_input" name="j_idt8:minutes_input" type="text" class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all" autocomplete="off" value="1" size="1" />
    <a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only">
        <span class="ui-button-text">
            <span class="ui-icon ui-icon-triangle-1-n"></span>
        </span>
    </a>
    <a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only">
        <span class="ui-button-text">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
        </span>
    </a>
</span>
<script id="j_idt8:minutes_s" type="text/javascript">
    PrimeFaces.cw('Spinner', 'widget_j_idt8_minutes', {
        id: 'j_idt8:minutes',
        step: 1.0,
        min: 0.0,
        max: 1000.0,
        behaviors: {
            change: function(event) {
                PrimeFaces.ab({
                    source: 'j_idt8:minutes',
                    event: 'valueChange',
                    process: 'j_idt8:minutes',
                    update: 'j_idt8:NewTime'
                }, arguments[1]);
            }
        }
    });
</script>
<span id="j_idt8:minutes2"></span>

EDIT

function Thankyou()
{
    var minutesVal = $('#minutes').spinner('value');//not finding the minutes selected
    alert(minutesVal);
    alert("Sent to the printing holding queue, you may close this app now or carry on using this app, your work will still print out ");
    //location.href = 'index.xhtml';
}

Now nothing happens, the loading symbol on the mouse comes up but no message box etc

Where are you including jQuery in your document? That's a jQuery method. — Daedalus
– Daedalus, Commented Apr 20, 2013 at 22:40
i am including it at the bottom under <script type="text/javascript"> — user2292674
– user2292674, Commented Apr 20, 2013 at 22:40
What is that? <p:spinner>? Presumably a templating system of some kind? — David Thomas
– David Thomas, Commented Apr 20, 2013 at 22:43
Do you have a link to the jQuery code library? I see you have the script with custom code but what about the jQuery library itself, from a CDN or a local download of it? — user571545
– user571545, Commented Apr 20, 2013 at 22:48

nnnnnn · Accepted Answer · 2013-04-20 22:42:20Z

4

The selector 'minutes' looks for an element with the tag name 'minutes', as in <minutes>. You want to go by id, which would be '#minutes'.

var minuteVal = $('#minutes').val();

answered Apr 20, 2013 at 22:42

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2292674 Over a year ago

That as well displays undefined sadly :(

nnnnnn Over a year ago

The .val() method is for form elements (inputs, etc.). What sort of html element(s) does the <p:spinner> produce?

Ian Over a year ago

I wonder if the selector '[id$="minutes"]' or something would work, because of id generation

David Thomas Over a year ago

From a quick Google, it seems to be this: primefaces.org/showcase/ui/spinner.jsf, which should produce an input element (among others), though it looks ('inspect element') like the id will bear only a passing resemblance to the string passed in as the id. So @Ian could well be right. Incidentally, I really dislike the look of that components system...

Ian Over a year ago

@DavidThomas Yeah! Haha I couldn't remember the name, but PrimeFaces sounds right.

|

Daedalus · Accepted Answer · 2013-04-20 23:03:03Z

3

jQuery selects elements based on css-style selectors; as an example, what you currently have would be selecting a 'minutes' tag, what you need is this:

 var minuteVal = $('#minutes').attr("value");

On top of that, value is not a valid attribute for anything but input, textarea, and select tags, so you either need to use data- prefixed attributes for non-standard html attributes, with .data("value"), or do something akin to the above.

edited Apr 20, 2013 at 23:03

answered Apr 20, 2013 at 22:41

Daedalus

7,7125 gold badges40 silver badges64 bronze badges

11 Comments

user2292674 Over a year ago

That as well displays undefined

Daedalus Over a year ago

@nnnnnn, and others, I have attempted to fix things. Sorry on my end. I used the wrong wording.

nnnnnn Over a year ago

I'll delete my previous comment. I don't know why you're getting downvoted over a minor wording thing like that, especially now that you've fixed it (I didn't downvote).

Daedalus Over a year ago

@nnnnnn Thank you for that, though if you have any suggestions on how I could improve this further, I'm all ears.

Ian Over a year ago

@Daedalus Well, they aren't using a <p> tag. They're using <p:spinner>, which is a JSP tag. p refers to the alias of the library of tags, and can be generated as anything - even several, nested elements

|

score 2 · Accepted Answer · 2013-04-20 23:31:13Z

2

Grab the first and second spinner from the final source in HTML:

var firstSpinner, secondSpinner;
$('input.ui-spinner-input').each(function(index) {
    if(index == 0) {firstSpinner = $(this).val();}
    else if (index == 1) {secondSpinner = $(this).val();} 
});
alert('First spinner: ' + firstSpinner + ' Second spinner: ' + secondSpinner);

edited Apr 20, 2013 at 23:31

answered Apr 20, 2013 at 23:09

user571545

9 Comments

user571545 Over a year ago

Does the alert say "undefined"?

user2292674 Over a year ago

There is not an alert anymore

user2292674 Over a year ago

looking at the console when i try to run the js i get the 'Uncaught TypeError: Object [object Object] has no method 'spinner''

user2292674 Over a year ago

sadly i have two spinners on the page :(

user2292674 Over a year ago

That code is working perfectly for the first spinner, how can i get the value of the 2nd ? (2nd spinner is the spinner above we have been trying to get the value for)

|

Collectives™ on Stack Overflow

Javascript returning undefined

3 Answers 3

8 Comments

11 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

11 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related