0

I have a situation that I haven't found any questions on yet.

Basically, I had to use the twitter-bootstrap typeahead on an input field.

However, this input field was a JSF inputText field like this:

<h:inputText id="arrivalAirport" value="#{searchFlightsBean.arrivalAirport}" styleClass="input-block-level blue-highlight" placeholder="Enter arrival city">
</h:inputText>

Unfortunately, the twitter-bootstrap typeahead doesn't work with JSF inputText fields - at least, I wasn't able to get it working(If there is a way to do that, please let me know in a comment!).

I had to use a normal input field inside the JSF form, like this:

<input data-provide="typeahead" value="#{searchFlightsBean.departureAirport}" class="input-override input-block-level blue-highlight airportSearch" placeholder="Enter departure city">
</input>

I got this working perfectly with the typeahead code.

One problem: The bean doesn't get the normal input field's value - that's the reason we were using JSF in the first place.

I need to use a normal input field for the typeahead JS, and I need to use a JSF inputText field in order to get the value to the bean.

Is there a way for me to do this?

Skytiger
  • 1,745
  • 4
  • 26
  • 53
  • 1
    This looks related: http://stackoverflow.com/questions/6859520/adding-custom-attribute-html5-support-to-jsf-2-0-uiinput-component – mrembisz Aug 13 '13 at 08:59
  • @mrembisz not quite what I was looking for, but I did find a solution, and will post it as the question for this answer :) – Skytiger Aug 13 '13 at 09:46
  • Your question is very long winded and confusing, but I guess that your question ultimately boils down to: "*How can I let `` render the `data-provide="typeahead"` attribute?"* Is that true? – BalusC Aug 13 '13 at 11:09
  • @BalusC I was just trying to explain why I was doing it the way I was. I've already asked that question and confirmed that typeahead either doesn't work with JSF, or the solution isn't worth the time it will take to find. I thought I'd work around it by grabbing the `` value, putting it in the `` somehow, and get that value in the bean. That proved to be clumsy and messy, so I found another way. – Skytiger Aug 13 '13 at 11:38
  • It look like that you don't understand what JSF is to be used for. JSF is in the context of this question merely a HTML code generator. Let's rephrase again, when you tried ``, you expected to see `` in the generated HTML output (rightclick page in browser, *View Source*), but `data-provide` wasn't there and therefore Bootstrap thing didn't work at all? Is that right? Ultimately, you want to ask how to get `` to generate the desired HTML so that Bootstrap can do its thing? – BalusC Aug 13 '13 at 11:40
  • Yea that's what I wanted. I realize that JSF is used to generate HTML, but it wasn't generating the data-provide attribute. I tried to find a solution(Asked quite a few questions about it on here) but was unsuccessful, so I decided to just use plain HTML instead of letting JSF do it for me. – Skytiger Aug 13 '13 at 11:46
  • We're finally getting somewhere. Okay, the root cause of the problem is identified: the `data-provide` attribute is not generated by JSF (for the very simple reason because it is not among the supported attribtues). But the same applies to `placeholder` and yet you said that it works fine. This is the confusing part. Are you using a custom renderer or renderkit? The answer would then be to use the very same custom renderer/renderkit to add `data-provide` attribtue as well. Or is it after all specified in JavaScript? Then you'd need to create/use a custom renderer/renderkit. – BalusC Aug 13 '13 at 11:51
  • 1
    Related Q&A: http://stackoverflow.com/questions/16666472/custom-html-tag-attributes-are-not-rendered-by-jsf/ – BalusC Aug 13 '13 at 11:53
  • I'm not sure how it worked before I started working on it. I might even have fooled myself into thinking that it was there before(Although I do remember there was place holder text when the field was empty). Regardless, The workaround I have now looks and works fine - it's not messy or confusing, so I think I'll stick to it. Thanks for the help, and for getting me to understand JSF a little better :) – Skytiger Aug 13 '13 at 11:56
  • Your workaround is however defeating the whole purpose of JSF. See also http://stackoverflow.com/questions/4421839/what-is-the-need-of-jsf-when-ui-can-be-achieved-from-css-html-javascript-jquery/4424775#4424775 Your workaround has the disadvantage that the input value is not bound to a bean and that it's impossible to bind JSF converters/validators on it. In any way, I'm going to vote to close this question as duplicate of http://stackoverflow.com/questions/16666472/custom-html-tag-attributes-are-not-rendered-by-jsf/ – BalusC Aug 13 '13 at 12:00

1 Answers1

2

I worked around the problem but setting the ID and name attributes on the input field like so:

<input id="arrivalAirport" name="arrivalAirport" value="#{searchFlightsBean.arrivalAirport}" class="input-block-level blue-highlight" placeholder="Enter arrival city">
</input>

After doing that, all I had to do in the bean was this following:

HttpServletRequest req = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
String arrivaleAirport = req.getParameter("arrivalAirport");

The above code worked perfectly for me, though I'm not sure it would work if there were more than one button.

Skytiger
  • 1,745
  • 4
  • 26
  • 53
  • 3
    It look much like that you seriously mixed up some concepts. The `` does not support `name` attribute at all. It does by default also not support `placeholder` attribute (there are ways to get JSF components to pass additional attributes). It's more likely that you were *actually* using plain HTML `` instead of JSF ``. – BalusC Aug 13 '13 at 11:07
  • Well I only joined the project after the screens were mostly done. I've never worked with JSF before. The inputText tags were already there, and the placeholder attribute was working. I'm going to edit my answer - the HTML snippet I posted was the wrong one(thanks for spotting that, would have confused people!) - I ended up using plain HTML, setting an ID and name attribute, and then getting the value in the bean using the HttpServletRequest. Thanks for catching that – Skytiger Aug 13 '13 at 11:35
  • 3
    The `` is not valid HTML. – BalusC Aug 13 '13 at 11:36