• Post Reply Bookmark Topic Watch Topic
  • New Topic

Change styleClass in p:commandLink using jquery

 
Partheban Udayakumar
Ranch Hand
Posts: 496
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • 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?
 
Tim Holloway
Bartender
Posts: 18413
58
Android Eclipse IDE Linux
  • Likes 1
  • Mark post as helpful
  • send pies
  • 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: 496
AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • 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
Bartender
Posts: 18413
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • 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.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!