Updating Primefaces Component Value with function in javascript

Question

i want to update my component value evry 10 keyup , so I wrote the following code :

<h:body>
   //***************************JAVAScript function**************
<SCRIPT LANGUAGE="JavaScript">
 function fnc(){
                length=document.getElementById("aa").value.length;
                 if(length == 10)
                                {
                        document.getElementById("aa").value ="";

                                }

                }

<ui:composition template="commonLayout.xhtml">

    <ui:define name="content">
        <section id="main" class="column">
        <h4 class="alert_info">Scannez les bonbonnes puis cliquez sur
            enregistrer :</h4>
        <div class="Saut20px">

            <h:form id="form">
                <p:panel id="panel" header="Register">

                    <br />
                    <p:focus context="panel" />
                    <p:growl id="msgs"></p:growl>


                    <h:outputLabel value="Code Barre :" />

  //*****************call function in onComplete******
   <p:inputText id="aa" value="#{bonBonneManagedBean.sel}">
                        <p:ajax event="keyup" update="koko msgs" oncomplete="fnc()"
                            listener="#{bonBonneManagedBean.ajouterSelected(bonBonneManagedBean.sel)}" />
                    </p:inputText>

But the call does not work , if you can help me find the error, thank you in advance

Answer 1

Try using onkeyup attribute of inputtext component;

 <p:inputText id="aa" onkeyup="fnc()" value="#{bonBonneManagedBean.sel}">

Good Luck!

Answer 2

You have few problems here. First your comments, they probably just exist in this question, not in code, so I will not talk about them.

As BalusC wrote, you are using some strange form of defining script tag I must admit that I have never saw something like that. On the other hand you are using section tag, which is, as I know, HTML5 tag, and be prepared it will not work on browsers that don't support HTML5.

You created AJAX event that will be called on every keyup event on input field... well, that would be a lot of requests here. I suggest you to avoid that.

Your concrete problem is that you try to find element with id aa , but I must say that there is no such element. JSF concatenate IDs from naming containers so your input will have id like this form:aa , and maybe something more before, if there are more naming containers in surrounding page. You can inspect generated HTML code of your page, and see real id of input component. On the other case you can do something like:

<p:inputText id="aa" onkeyup="fnc(this)" value="#{bonBonneManagedBean.sel}"/>

With this solution remove ajax tag.

and change your fnc to:

function fnc(inputComponent)
{
  length = inputComponent.value.length;
  if(length == 10)
  {
    inputComponent.value = "";
  }
 }

At the end, I really think that you are playing with JSF and JavaScript, I really don't see any usability of this.