Question

问题：对于下面提供的代码段，如果h:commandButton onevent具有作为值提供的函数名称，则在单击f:ajax时重新加载页面，但是对于相同的，如果它具有作为值提供的函数声明一个值，它按预期工作。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"" >

<h:head>
    <h:outputStylesheet library="blue" name="style/style.css" />
    <h:outputScript library="script" name="jquery-1.8.0.min.js" />

    <script>
        function jq(myid) {
            return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\\\$1" );
        }

        function confirmDelete(data){
            if(data.status == "success") {
                $("#confirmDelete").show();
                $(jq("licenseForm:buttons")).hide();
            }
            return false;
        }
    </script>
</h:head>
<h:body styleClass="bodyForm">
    <div class="content">
        <h:form id="licenseForm">
            <fieldset id="confirmDelete">
                <h:panelGroup>
                    <h:panelGrid columns="2">
                        <h:selectOneMenu value="#{bean.deleteReason}">
                            <f:selectItems value="#{metadata.deleteReasons}" />
                        </h:selectOneMenu>
                    </h:panelGrid>
                </h:panelGroup>
            </fieldset>
            <h:panelGroup id="buttons" layout="block">
                <h:commandButton value="Delete" styleClass="button">
                    <f:ajax onevent="confirmDelete" />
                </h:commandButton>
            </h:panelGroup>
        </h:form>
    </div>
</h:body>
</html>

JSF版：Mojarra JSF实施2.2.12
服务器：Apache Tomcat 8.0.24

Answer 1

如果有问题的webbrowser以某种方式覆盖JavaScript函数，就会发生这种情况。已知Internet Explorer and Chrome在JavaScript全局范围内将id的{{1}}放在HTML id中。所以例如<element id="foo">在JavaScript全局范围内可用作变量foo。

在您的具体情况下，您同时拥有function confirmDelete()和<fieldset id="confirmDelete">。然而，非常意外的是DOM元素将完全覆盖JavaScript函数。这表明浏览器中使用了一个错误。最好的办法是将JavaScript函数或元素ID重命名为全局范围内的唯一ID。

对具体问题

无关，您的jq()效率低下。这样更好：

function jq(myid) {
    return document.getElementById(myid);
}

您可能也想重命名该功能。有关在JSF中使用jQuery的其他提示，另请参阅How to select JSF components using jQuery?

f：ajax onevent在h：commandButton上重新加载页面

1 个答案: