jQuery and JSF ids

For the upcoming 0.9.0 PrimeFaces release I’ve migrated PrimeFaces to use jQuery for Dom manipulation and Ajax purposes. Along the way I’ve faced an issue where jQuery doesn’t play well with the JSF clientIds containing the colon “:” so special characters like this need to be escaped.

Following does not work with jQuery and form is effected as well.

jQuery("form:id").something();

After spending sometime in jQuery docs and finding a solution, I’ve added an utility to PrimeFaces core utilities to escape JSF client ids.

PrimeFaces.core.Utils = {

//Utility method to help jQuery work with JSF clientIds
escapeClientId : function(id) {
return "#" + id.replace(/:/g,"\\:");
}

//more stuff
};

And used it like;

jQuery(PrimeFaces.core.Utils.escapeClientId(jsfid)).something();

As far as I know there’re other ways to make ids containing funny characters work with jQuery, so feel free comment if you know other alternatives.

2 Responses to jQuery and JSF ids

  1. Ryan says:

    Interesting.. someone from work was telling me that he’s switching to JQuery yesterday. I’m not questioning your decision, I am just curious what made you choose to switch to jQuery?

  2. Well, we were using prototype before and there’re several reasons that pushed me to the switch. jQuery can run in noConflict mode unlike prototype($), nice plugins as future JSF components:), easier to do ajax and dom manipulation. PrimeFaces still uses YUI for the UI components, we’re not using jQuery UI since it needs a lot of time and work to catch up with YUI.

%d bloggers like this: