Integrating JSF 2 and JQuery Mobile

Question

I'm trying to take an existing JSF 2 page and style it using JQuery Mobile (JQM). The problem is that JSF won't handle some of the JQM attributes. For example, I want to create a JQM-styled search input:

<input type="search" name="search" id="search" />

In order for this to be integrated with the JSF page, I have tried this:

<h:inputText type="search" name="search" id="search" value="#{bean.searchText}"/>

JSF does not accept a type attribute, so the rendered HTML looks like this:

<input type="text" name="search" id="search" />

This does not produce the proper JQM search widget :-(

I've googled for hours and have not found any examples of the integration of the two. Any ideas on how to make JQM and JSF play nicely? Thanks in advance!

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

"To overcome this, you would need to create a custom component or, better, just a custom renderer which overrides the standard <h:inputText> renderer and takes the custom attributes into account."

Take a look at BalusC complete explanation and suggested solution over here : JSF 2.0 strips out needed HTML5 attributes

edited May 23 '17 at 12:11

Community

1
1

answered Mar 25 '12 at 08:51

Daniel

36,833
10
119
200

Thanks, Daniel. I think I'll go that route! – Paul Waldo Mar 26 '12 at 14:41

score 0 · Answer 2 · answered Jan 03 '13 at 05:06

0

You can use jQuery or javascript to add attributes after the page is rendered.

answered Jan 03 '13 at 05:06

Dean

1

this is not a good idea because it gets complicated with a lot of components – fuggerjaki61 Jan 12 '20 at 17:27

Integrating JSF 2 and JQuery Mobile

2 Answers2