aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes jQuery select option Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery select option" Watch "jQuery select option" New topic
Author

jQuery select option

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Guys,

I have a jsp page which is rendered using Struts 2 tags. In this jsp page, I have a select box which is also rendered using the Struts 2 select html tag. In this select box I have an option called other. The goal is to display the hidden text box when the option Other is selected. But somehow it won't work. Below is my code (in my jsp page):



My js file:



I tried putting alert in the change function but looks like it is not respected at all. Any ideas on why this simple thing would not work?


SCJP 1.4, SCWCD 1.4 - Hints for you, Certified Scrum Master
Did a rm -R / to find out that I lost my entire Linux installation!
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
What does it look like when it is rendered? Show View Source, not the serverside source.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

To be completely clear: jQuery operates on the client side, so the server-side markup is moot. What's of interest is the HTML that is generated. Showing server-side markup is not useful for client-side issues. As Eric asked, please show the client-side markup. Please use code tags, and it might make things easier if you make sure the format isn't completely wonky (as server-generated markup tends to be). Thanks.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Also, have you debugged this using a debugger such as Firebug, or the built-in IE8 debugger? What values are you getting? Are they correct? If not, which ones are wring?
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Yes, I did try to view the source using firebug. Below is the rendered html:

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Do I need to add any sort of plugin (Struts, jQuery plugin)? But I sincerely do not have any plans to use jQuery Struts tags.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

No, no plugins. What you need is debugging.

Is your selector selecting the right element? What value are you getting from the .val() method? Just like a good Agatha Christie mystery, you need clues. These clues will help to track down where the problem lies.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Your problem has nothing to do with the jQuery code, it has to do with the element you are using



That element will always be hidden, it will not show up because you tell it to with CSS. You need to use a regular textbox and set it to be hidden with CSS. Than your code will magically work.

Eric
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Bear Bibeault wrote:No, no plugins. What you need is debugging.

Is your selector selecting the right element? What value are you getting from the .val() method? Just like a good Agatha Christie mystery, you need clues. These clues will help to track down where the problem lies.


It does not even get inside the function.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Are you registering it on document ready?

Need to register it after the control has been loaded.



Eric
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Eric Pascarello wrote:Are you registering it on document ready?

Need to register it after the control has been loaded.



Eric


Gosh. That was the catch. Thanks!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

See? Clues solves the mystery!
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Yes, I'm seeing it.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Looks like I'm not yet done. I've added the style information as:


But during page load, the text box appear rather than being hidden:


Below is what it looks like when rendered:



Tha hiddenElem div is inside another div. Did I do any mistake with the css?

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

But once I change the options it seems to work. But the page load is not respected and the element supposed to be hidden is displayed.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

No mystery. Your style selector does not match the element.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Yes, I thought about that. But how do I refer in my css to a div id which is deep inside multiple other div elements?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Joe Harry wrote:Yes, I thought about that. But how do I refer in my css to a div id which is deep inside multiple other div elements?

As id values are unique, nesting make no difference whatsoever. If an element has an id of fred, it can be selected with #fred regardless of where it is located in the DOM.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

It seem not to work though. The id is unique. I managed to get it working by adding the following to my javascript function.



But would that mean that initially when the page is loaded the element is shown and once the page is completely loaded, the hide() function gets called?

I was somehow not able to get the css style applied when rendering the page. So had to opt for the above solution.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Joe Harry wrote:It seem not to work though.

Seems being the operative word here.

I was somehow not able to get the css style applied when rendering the page.

That's because, as I have already pointed out, your selector is incorrect.

So had to opt for the above solution.

Perhaps you could opt for fixing the incorrect selector rather than adding a bunch of unnecessary script to the page?
Larry Aronson
Author
Greenhorn

Joined: Dec 08, 2010
Posts: 26

The correct CSS to hide an element (as if it never existed) is:

display: none;

Your CSS:



Larry Aronson
Author: HTML Manual of Style
http://LarryAronson.com/
@laronson, @HTML5pro
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

(Yeah, once the selector is fixed, I was gonna tackle the property value error.)
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Yes, it works now. But is there a difference using the . (read dot) operator to the # operator when specifying the CSS elements?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Absolutely. # selects by identifier, . selects by class. They are not interchangeable.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Great. I will never forget this difference anymore. Thanks for the help guys!
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

I added the jQuery validator plug in to my existing page above. But after that the drop down toggle as described above would not work and even the validation that I would like to happen would not work. I actually added the jquery-validation.js to my jsp page which I downloaded from here http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Did I add the correct plug in?
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Yes, it looks like I have added the correct plugin but it does not respect the validation rouitne upon submit:
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Line 4 is not valid.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

The document ready function seems to work. But as soon as I add the code for the validation, everything fails:



But the below one fails.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Bear Bibeault wrote:Line 4 is not valid.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Bear Bibeault wrote:Line 4 is not valid.


What is wrong with that? I tried the following changes for Line 4:

(1) Changed the double quotes to single - No effect
(2) Removed the alert - No effect

What else could I change on Line 4?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

Joe Harry wrote:What else could I change on Line 4?

You got an alert statement in the middle of an object literal. Invalid syntax.

While removing it may not solve all issues, leaving it in will certainly boof things up.

What does the JavaScript console have to say? Any errors?
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

I changed the function as below:



Now the alert "ready" function gets printed.... But the form gets submitted without going inside the validation routine.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

The javascript console does not show any errors.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

OK, so now you've got the ready function executing (which it was not previously because of the syntax error). What's the next debugging step?

If the validation does not seem to be being applied to the form, then check that it is. The first suspect (the equivalent of the butler), is the jQuery selector. Is $("#registerUserForm") really selecting what you think it is?
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

Ok. Made a little bit of progress. The function now looks like:


Now, when I click submit only the emailConfirm gets validated.
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9521
    
    2

OK. Figured out the problem. It was because of the fact that the name element for the firstName, lastName and email has something like beanName.fieldName. A sample for the firstName field is as shown below:



Where userDetails is the bean name in which firstName is a property. This is for the Struts framework to prepare my Model by populating the values in my UserDetails bean. How to work around this?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

You've already been asked not to show server-side tags in this forum such as <s:textfield>. Such tags are meaningless to client-side code.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61657
    
  67

The names must match, simple.

The maybe-not-so-simple part is that you must remember to quote them when used as identifiers as the dot is not a valid identifier character.

(and this is just a small example of why I avoid monstrosities like Struts).
 
Consider Paul's rocket mass heater.
 
subject: jQuery select option