• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Ajax "Change" Event Doesn't Fire When Clicking HTML "Reset" Button

 
Chris Gabel
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a JSF web app that uses ajax on a h:selectOneListbox to update another field on the screen with CSS. When I click the HTML "reset" button, the value in the h:selectOneListbox changes, but the ajax event doesn't fire.

Example: The h:selectOneListbox can contain values of USER, ACCT, NONE, EMAIL. I want to hide the Email input field and its label when "EMAIL" is not selected. As I change the drop down menu from value to value, it hides and shows the email fields as it should. If I start with "USER" selected and the email field hidden, then select "EMAIL" (which makes the email fields appear), then click the HTML "reset" button", the drop down menu changes back to "USER" but the email field is still visible. The ajax event to hide it hasn't fired.

Does anyone know why?


Code: (the drop down menu)


Code: (the email/emailLabel fields I am hiding)


Code: (CSS)
 
K. Tsang
Bartender
Posts: 3521
16
Android Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You should use the "valueChange" event for the ajax call in your selectOneMenu and use "update=email emailLabel" instead of render. Then in the email and emailLabel, use render=<some condition> such the value in the selectOneMenu=email

From my experience render from such ajax calls sometimes doesn't work so an alternative is use disable instead. disable=false when selectOneMenu=email

Hope this help.
 
Tim Holloway
Saloon Keeper
Posts: 18300
56
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The "reset" button renders as an HTML <INPUT TYPE="RESET"> control element. The HTML RESET button does not submit a form the way the SUBMIT button does. Instead, it initiates action within the client itself. The client (browser) will restore whatever values the related form had when the page was rendered.

Since AJAX is just a specialized type of form SUBMIT and RESET doesn't submit, that's why events don't fire and listeners are not invoked.
 
Chris Gabel
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
K. Tsang: I'm not sure what you mean. You want me to add another ajax field to the "email" inputText and "emailLabel" outputText fields? Did you want me to get rid of the conditional styleClass parameters? Something like this?



Tim Holloway: Thanks for the explanation.
 
K. Tsang
Bartender
Posts: 3521
16
Android Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Chris I probably didn't explain it really good. What I really meant is something like:



 
Tim Holloway
Saloon Keeper
Posts: 18300
56
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hint: if you value your hair follicles, put the styleClass logic into a backing bean property.

Debugging EL can be a real :censored: Plus, it's more efficient to have the java compiler evaluate the logic.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic