Difference in behaviour between javascript click() and user click on a button using JSF

[mfarwell]

     I have a form which, when the button gets clicked by a user, redirects to another page, but when I simulate the click with javascript, the redirect fails. Tha ajax calls are exactly the same (except for the javax.faces.ViewState, but have different results.

The form looks something like:

    <h:form id="form" onkeypress="trapEnter(event);">
        <h:outputText value="Number" />
        <h:inputText value="#{form.number}" />
   
        <a4j:commandButton id="act" value="Go" action="#{form.go}" />
    </h:form>

The javascript function:

    function trapEnter(evt) {
      // cut out to save space
       
      if (keycode == 13) {
        document.getElementById('form:act').click()
        return false;
      } else {
        return true;
      }
    }

When I enter 3 into the text input box and click Go, the page is redirected as expected to the target returned by #{form.go}.

When I enter 3 into the text input box and press enter, #{form.go} is called correctly but the page is NOT redirected.

In both cases form.go is called correctly and returns the correct value for the redirection. Could anyone tell me why the javascript click() does not work, and if I'm doing something completely wrong, please tell me how to do it right.

I have to use a4j:commandButton because I have to display a 'please wait' modal popup during the submit, so I can't use h:commandButton.

I'm using Firefox 3.5 Richfaces 3.3.2.SR1, if that makes a difference,

Thanks.

[harut]

I tried to reproduce your mentioned case, but no success -- it works fine for me.

Here is my code:

<script type="text/javascript">    
        function trapEnter() {           
              document.getElementById('myForm:forumTestButton').click()

            return false; //this is just for having the same return type as in your example...
          } 

</script>

<h:form id="myForm">     

     <a4j:commandButton value="JS_CALL_BUTTON" onclick="trapEnter()"/>
     <a4j:commandButton id="forumTestButton"                   
                  value="ACTION_CALL_BUTTON"
                  action="#{searchTaskController.onTestForum}"/>

....................

</h:form>

In both cases (clickin on any of above commandButtons) page is redirecting correctly after action...

[mfarwell]

Thank you for your response.

Your code works, but it doesn't answer my question. I'm not clicking on any buttons, I'm trying to get the click() to work when I press Return.

According to what I understand, typing 1 in the box and pressing return should have exactly the same effect as typing 1 in the box and clicking on the Go button, but it does not.

Any help would be appreciated.

Matthew.

[harut]

In my previous post above, I just created a simple example to investigate the problem you have mentioned that clicking the button from JS function, is not redirecting the page (or I am missing something???). And that's why in my post I have 2 a4j:commandButtons one of them has "action" assigned

(id="forumTestButton"), and clicking on that button will call an action method in the backing bean, and after it will redirect the page. The second a4j:commandButton (value="JS_CALL_BUTTON") has not any action assigned, it is just calling JS function on "onclick" event (the same way you are pressing "Return" and call the JS), and after pressing that button JS function is calling which provides clicking functionality to the previous button ((id="forumTestButton"), and after it page is redirecting sucessfully.... So in this case the first button has been clicked by JS function (what was the main question).

[mfarwell]

You are perfectly correct when you say that your example works. However,  it is not the same as my example.

The difference between your example and mine is that you are clicking  directly on a button in the form, whereas I have defined an onkeypress  event for the form, and the function called when I hit return calls  click(), and the redirect from this click does not work.

I would like to know why the click() when called from a button works, but when called from the onkeypress event does not.

The problem is that it does not work when I hit return, when I'm calling click() from javascript, from the function called when I hit return.

Matthew.

[harut]

Hi Matthew, I have modified my sample to make redirection after "Returned" clicked, and it works fine. Here is the code (just add rich:hotKey):

<script type="text/javascript">    
        function trapEnter() {         

              document.getElementById('myForm:forumTestButton').click()     
         }

</script>

<h:form id="myForm">   

     <rich:hotKey key="return" handler="trapEnter(); return false;"/>

....................

</h:form>

(And no need to handle onkeypress event of the form)

Regards.