JSF Ajax 在第一次加载时不起作用

Question

嗯，发生了一些奇怪的事情。

第一次加载页面时，ajax 操作不起作用。如果我刷新页面，它工作正常。

一个例子是当我点击一个选择菜单选项时。它应该关闭对话框并触发 ajax 事件，但它只是选择选项而不关闭。我需要单击两次才能选择，但无论如何都不会触发ajax。

这是我的完整页面：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets" >
    <ui:composition >
        <h:head>
            <title>Manager</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
            <link rel="stylesheet" href="/Manager/resources/jquery.mobile-1.4.0-rc.1.min.css" />
            <script src="/Manager/resources/jquery-1.10.2.min.js" />
            <script src="/Manager/resources/jquery.mobile-1.4.0-rc.1.min.js" />

            <script type="text/javascript" >
                function renderFormCss () {
                    $('#f_meta_cadastro_empresa').enhanceWithin();
                }
            </script>

            <f:metadata>
                <f:viewParam name="cd_meta" value="#{meta_EmpresaWEB.cd_meta}"></f:viewParam>
            </f:metadata>
        </h:head>

        <h:body >

            <div data-role="page" >

                <div data-role="header" data-theme="b" class="ui-nodisc-icon" >
                    <a href="#" class="ui-btn ui-noboxshadow ui-icon-arrow-l ui-btn-icon-notext" data-iconshadow="false" >Menu</a>
                    <h1>Meta</h1>
                    <a href="#" class="ui-btn ui-noboxshadow ui-icon-arrow-r ui-btn-icon-notext" data-iconshadow="false" >Próximo</a>
                </div>

                <div role="main" class="ui-content ui-nodisc-icon ui-alt-icon" >

                    <h:messages id="mensagem_verificacao" showDetail="false" style="color: red;" />

                    <h:form id="f_meta_cadastro_empresa" >
                        <f:passThroughAttribute name="data-ajax" value="false" />

                        <h:selectManyMenu id="select_empresa" value="#{meta_EmpresaWEB.listaMeta_Empresas_Selecionadas}" converter="Meta_EmpresaConverter" >
                            <f:passThroughAttribute name="data-native-menu" value="false" />
                            <f:passThroughAttribute name="data-shadow" value="false" />
                            <f:passThroughAttribute name="data-corners" value="false" />

                            <f:selectItem itemLabel="Empresas" itemValue="#{null}" >
                                <f:passThroughAttribute name="data-placeholder" value="true" />
                            </f:selectItem>

                            <f:selectItems value="#{meta_EmpresaWEB.listaMeta_Empresa}" var="meta_empresa" itemLabel="#{meta_empresa.nm_empresa}" itemValue="#{meta_empresa}" />
                            <f:ajax execute="select_empresa" render="lista_empresas" onevent="renderFormCss" />
                        </h:selectManyMenu>

                        <h:panelGroup id="lista_empresas" layout="block" >
                            <ul data-role="listview" style="margin-top: 30px;" class="ui-nodisc-icon" >
                                <ui:repeat value="#{meta_EmpresaWEB.listaMeta_Empresas_Selecionadas}" var="meta_empresa" >
                                    <li  data-role="list-divider" style="font-weight: bold;">
                                        <h2>#{meta_empresa.nm_empresa}</h2>
                                        <div data-role="controlgroup" data-type='horizontal' data-mini="true" class="ui-btn-right" style="margin: 0 auto;" >
                                            <h:selectManyMenu id="a" value="#{meta_empresa.dias_mes}" >
                                                <f:passThroughAttribute name="data-native-menu" value="false" />
                                                <f:passThroughAttribute name="data-shadow" value="false" />
                                                <f:passThroughAttribute name="data-corners" value="false" />

                                                <f:selectItem itemLabel="Dias" itemValue="#{null}" >
                                                    <f:passThroughAttribute name="data-placeholder" value="true" />
                                                </f:selectItem>

                                                <f:selectItems value="#{meta_EmpresaWEB.dias_Mes}" var="dia" itemLabel="#{dia}" itemValue="#{dia}" />
                                            </h:selectManyMenu>
                                            <a href='#' id='moreOptions' class="ui-btn ui-btn-b" style="margin-left: 5px; margin-right: 5px;" >Prêmio</a>
                                        </div>
                                    </li>
                                    <li >
                                        <h:inputText >
                                            <f:passThroughAttribute name="placeholder" value="Vl. Meta" />
                                        </h:inputText>
                                    </li>
                                </ui:repeat>
                            </ul>
                        </h:panelGroup>

                    </h:form>

                </div>

            </div>

        </h:body>

    </ui:composition>
</html>

当我单击它不起作用时，chrome 控制台会触发此错误： ReferenceError: mojarra 未定义。

另一个奇怪的事情。当我调用页面时，控制台网络没有改变，它只是添加了这样一行：

有什么想法吗？

谢谢

Answer 1

我解决了，终于o//

问题出在电话上。

我使用的是<a href="mypage" />

我改成<a href="#" onclick="window.location.href='mypage'" />，它成功了

Answer 2

尝试从此页面中删除 ui:composition。

另见：understand the purpose of jsf ui:composition