Question

我想在我的应用程序中使用ajax但在IE（Internet Explorer）上有一种行为让我无法继续。当我们有一个带有文本字段的简单表单和带有ajax的提交按钮时。该按钮第一次工作但后续调用不发送ajax并重新加载页面。第三次确定，然后没有ajax等等。它很容易测试。我不想在IE上重新加载页面。在其他浏览器工作正常，并没有页面重新加载。所以我的应用程序因为这个BUG而无法在IE上运行？

<!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>

Answer 1

f：ajax在提交按钮中生成一个onclick。通过单击第一次提交表单并在Ajax完成后重新呈现表单。 onclick是在新生成的html中，但是在IE中没有注册用于Click的Eventlistener你可以看到这分析了IE DevTools中的按钮属性。所以解决方案是在ajax调用新的渲染元素之后手动添加Eventlistener。这不容易，但这是有效的。我为每个新的渲染元素手动添加每个点击功能。有用。现在我重新加载页面没有问题。

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

IE浏览器上的jsf ajax单击按钮两次重新加载页面

1 个答案: