jsf ajax on IE click button twice reload the page

Question

I want to use ajax in my app but on IE (Internet Explorer) there is a behavior that kept me from continuing. When we have a simple form with a text field and a submit button with ajax. The button works the first time but subsequent call sends no ajax and the page is reloaded. the third time ok, then no ajax and so on. It's easy to test. I dont want a page reload on IE. In other Browser works fine and ther is no page reload. so my app can't run on IE because of this BUG?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
>
<h:head>
    <title>Employees App</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

</h:head>
<h:body>

    <h:form id="myform" style="margin-top: 50px;margin-left: 50px">
        <h:inputText value="#{testController.firstName}" id="firstName">
            <f:validateLength minimum="3" maximum="50"/>
            <f:validateRequired/>
        </h:inputText>
        <h:message for="firstName" errorClass="form-control-feedback" />
        <h:commandButton value="Form1 Submit f:Ajax" type="submit">
            <f:ajax execute="@form" render=":myform"/>
        </h:commandButton>
    </h:form>

</h:body>
</html>

See https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value and check your browser's Javascript console for errors. — Jasper de Vries, Feb 12 '18 at 14:35
tks jasper but i can't find nothing that can help. as you see my form is very simple there is nothing special. — mmbarek, Feb 12 '18 at 15:39

score 0 · Answer 1 · edited Feb 14 '18 at 07:17

f:ajax generates an onclick in the submit button. by clicking the first time the form is submitted and the form is rerendered after Ajax is finish. the onclick is in new generated html but in IE there is no Eventlistener registred for click you can see this analysing the button properties in IE DevTools. so the solution is to add manually the Eventlistener after an ajax call for new rendered elments. ist not easy but this works. i add manually every click function for new rendered elements. It works. now i have no trouble with reloading page.

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // display the current click count inside the clicked div
    event.target.textContent = "click count: " + event.detail;
  }, false);
</script>

jsf ajax on IE click button twice reload the page

1 Answers1