2

I have developed jQuery autocomplete with JSF and it's working fine, but when I add h:form it's not working.

This is my code. 

<script>        
    /* auto complete */
    $(function() {
        var availableTags = "#{instrumentBean.instrumentList}";     
        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>

<div class="ui-widget">
    <h:form>                            <!-- this form was missing -->
        <label for="tags">Symbol: </label>

        <h:inputText id="tags" />
        <h:form id="watchListForm">
        <h:commandButton action="#{watchListBean.addtowatchList}" 
                         value="ADD TO WATCH LIST"/>
    </h:form> 
</div>

With above code autocomplete is working fine, but when I put h:inputbox inside h:form it's not working. Without putting it in h:form I'm not able to submit it's value to JSF backing bean. Please give me valuable idea to get this correct.

Thanks in advance

Jaumzera
  • 2,305
  • 1
  • 30
  • 44
Pradeep Gamage
  • 585
  • 4
  • 8
  • 21
  • I inserted h:inputHidden and set it to value using java script. then its working as i want. this is my code – Pradeep Gamage Feb 01 '12 at 07:41
  • 1
    When writing JavaScript/jQuery code you must not look at the JSF source code, but at its generated HTML output (open page in browser, rightclick and *View Source*). – BalusC Feb 01 '12 at 11:52
  • @Nicola Peluchetti hy, may i ask what Type instrumentList is? I tried it with LinkedList, autocomplete does not allow that – leostiw Oct 15 '14 at 07:24

4 Answers4

5

I'm not sure that this is the cause, but i use JSF and usually the id of the field inside the the form are made up prefixing the id of the form to the id of the componente. So you should try to use (if your <h:inputText> is inside <h:form>)

$(function() {
  var availableTags = #{instrumentBean.instrumentList};    
  //the id of the component should be watchListForm:tags, you have to escape 
  //the semi-colon
  $( "#watchListForm\\:tags" ).autocomplete({
    source: availableTags
   });
});
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • Thought the same. JSF's generated IDs differ from what you do in the xhtml template. Best is to look at the element using some debugging tool in your browser. (e.g. Firebug for Firefox) – Sebastian Wramba Feb 01 '12 at 07:54
  • hy, may i ask what Type instrumentList is? I tried it with LinkedList, autocomplete does not allow that – leostiw Oct 15 '14 at 07:26
  • Hey mate, I just need to wrap my bean into `" "` like `"#{instrumentBean.instrumentList};"` Did you miss that? – alexander May 01 '16 at 19:12
1

What happens here is because you have not specified prependId="false" in <h:form> tag, the <h:inputText> tag's id is auto generated with a prefix added to the beginning of the id(i.e. Client Identifiers).

You can use prependId attribute in <h:form> tag set to 'false' which keeps the user inserted id and eliminates the JSF auto generated id's in the html tags. You should use prependId="false" in <h:form> tag

here's how you do it,

 <h:form id="yourForm" prependId="false">
    <h:inputText id="textId" />
    <h:commandButton action="#{yourBean.addtoList}" value="ADD" >
    </h:commandButton>
 </h:form>

JQuery will always search for the exact id which you have specified in your JQuery code. Which would be like this,

<script type="text/javascript">        
$(function() {
  var insTags = #{insBean.insList};       
  $("#textId").autocomplete({
     source: insTags 
  });
});
</script>
Swarne27
  • 5,521
  • 7
  • 26
  • 41
1

JSF emits the client identifier to namespace components within the DOM as per the rules defined in the API. form components have the prependId attribute if you want to exercise some control over this.

McDowell
  • 107,573
  • 31
  • 204
  • 267
-1

Instead of using id with jQuery you can use a dummy css class name like jQuery(".className").autocomplete();

So, you have to apply this class to div of autocomplete like: 

<div class="className"> ..
Math
  • 3,334
  • 4
  • 36
  • 51
Tamer Mohamed
  • 1