This week's book giveaway is in the OCAJP forum.
We're giving away four copies of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) and have Khalid A Mughal & Rolf W Rasmussen on-line!
See this thread for details.
Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery select option

 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What does it look like when it is rendered? Show View Source, not the serverside source.

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, I did try to view the source using firebug. Below is the rendered html:

 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you registering it on document ready?

Need to register it after the control has been loaded.



Eric
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
See? Clues solves the mystery!
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, I'm seeing it.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No mystery. Your style selector does not match the element.
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 26
MySQL Database PHP
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The correct CSS to hide an element (as if it never existed) is:

display: none;

Your CSS:


 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
(Yeah, once the selector is fixed, I was gonna tackle the property value error.)
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Absolutely. # selects by identifier, . selects by class. They are not interchangeable.
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Great. I will never forget this difference anymore. Thanks for the help guys!
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Line 4 is not valid.
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Line 4 is not valid.
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The javascript console does not show any errors.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic