• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Change styleClass in p:commandLink using jquery

 
Ranch Hand
Posts: 499
Spring AngularJS Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I have a menu with four <p:commandLink> and I am trying to change the active class using jquery as the menu navigates to different pages. Here are the codes





My guess is that since I have the class added <a> tag, this doesn't work. I want the active class to be added to the commandlink on page change. Can you guys help me out?
 
Saloon Keeper
Posts: 27763
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well, it's too early in the morning for me to verify functionality of code, but one thing that does stick out is that you're using the jQuery "$()" shorthand.

Use of the "$" character on JSF templates is tricky because "$", like "#" is meaningful to the EL parser and therefore may result in effectively mangling the page logic. You can use "$()" if you adhere to certain rules, but I find it less troublessome to simply use the "jQuery()" form, instead.

Some things that in general will help protect you for embedded scripts are to fully protect the scripts themselves. Like so:



Here's a breakdown.

1. The "verbatim" tag tells JSF not to try and interpret the verbation tag's body as JSF. This used to be more important in JSF version 1, but it's still not a bad idea.
2. The "CDATA" XML escape tells the XML parser NOT to interpret any XML constructs within the CDATA. This is especially important in Javascript, since the "less-than" and "greater-than" operators look like broken XML tags and the ampersand, quote and apostrophe characters carry risks as well.
3. The "//" beginning the close of script is a Javascript comment marker so that the JavaScript parser won't mistakenly attempt to parse the closing tags as JavaScript. Especially the close of the CDATA which otherwise resembles a broken fragment of some bizarre array expression.

It's safer and easier to put your CSS and Javascript elements into a separate included resource where all that escaping isn't needed, but I'll confess that when I'm doing quick-and-dirty stuff I slap it all down directly on the page under development. Suitably escaped, of course.

 
Partheban Udayakumar
Ranch Hand
Posts: 499
Spring AngularJS Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Tim Holloway,

I have 2 other scripts in my page but they work fine. Only this script doesn't work.

I tried this


but this doesn't work. It gives the same result.
 
Tim Holloway
Saloon Keeper
Posts: 27763
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well, it's early in the morning again, but you did say "change the active class using jquery as the menu navigates to different pages", and in general, using JavaScript of any kind when you're moving from on View (page) to another doesn't work, since the JavaScript on the old page cannot access the DOM of the new page since only one of the 2 pages in question exists at any given point in time.

Actually, if you specifically want the classes to be set up as you render a new page, a better approach would be do obtain the class name(s) as an EL property from the backing bean, not by using JavaScript. That is, something like:



Where "ulClass" might carry the values of "active" or "", (or "inactive", for that matter).

And incidentally, I don't know that using the verbatim tags is going to keep the EL parser from mis-interpretring the "$()" syntax. You really should use the "jQuery()" form. Although I think that PrimeFaces may have jQuery-specific tags in its collection of extensions to JSF.

Speaking of PrimeFaces, I think it also has something that renders "ul" tags without the need to resort to brute-force HTML.
 
If tomatoes are a fruit, then ketchup must be a jam. Taste this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic