jQuery autocompletar con JSF [duplicado]

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

Este es mi codigo.

<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 dentro 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.

Gracias por adelantado

preguntado el 01 de febrero de 12 a las 04:02

I inserted h:inputHidden and set it to value using java script. then its working as i want. this is my code <h:inputText id="tags" required="true" requiredMessage="#{msgs.requireMassage}"/> <h:form id="watchListForm"> <h:inputHidden id="ttt" value="#{watchListBean.symbolName}"/> <h:commandButton action="#{watchListBean.addtowatchList}" value="ADD TO WATCH LIST" onclick="document.getElementById('watchListForm:ttt').value = document.getElementById('tags').value"> </h:commandButton> </h:form> -

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 Ver código fuente). -

@Nicola Peluchetti hy, may i ask what Type instrumentList is? I tried it with LinkedList<String>, autocomplete does not allow that -

4 Respuestas

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> está dentro <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
   });
});

Respondido 01 Feb 12, 11:02

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) - Sebastián Wramba

hy, may i ask what Type instrumentList is? I tried it with LinkedList<String>, autocomplete does not allow that - leostiw

Hey mate, I just need to wrap my bean into " " como "#{instrumentBean.instrumentList};" Did you miss that? - Alejandro

JSF emits the identificador de cliente to namespace components within the DOM as per the rules defined in the API. utilizando el formulario components have the prependId attribute if you want to exercise some control over this.

Respondido 01 Feb 12, 12:02

What happens here is because you have not specified prependId="false" in <h:form> etiqueta, el <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> etiqueta

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>

Respondido 04 Oct 12, 14:10

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"> ..

respondido 25 mar '15, 15:03

This is not relevant to the JSF aspect of the question. - Rhys Jones

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.