Javascript ui:repeat 到 show/hide 中的函数联系公式不起作用

Question

我有一个 facelet，可以动态列出从数据库加载的教师姓名、个人资料图片等。每个列出的教师都有自己的联系方式，在页面加载后隐藏，还有一个按钮 "get in touch" , onclick, 将打开下面的联系人公式并隐藏按钮 "get in touch"。该公式有一些文本字段和一个提交按钮 "send request"。单击 "send request" 后，我想调用一个将请求保存在数据库中的支持 bean 方法，并且使用 javascript 再次隐藏联系公式并显示 "get in touch" 按钮。

这是列出教师的页面：

<ui:composition template="/WEB-INF/templates/layout.xhtml"
            xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://xmlns.jcp.org/jsf/html"
            xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
            xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
            xmlns:p="http://primefaces.org/ui">

<ui:define name="content">

    <script type="text/javascript">
        $(document).ready(function () {
            $(".request_form").hide();
        });
    </script>

    <ui:repeat id="teachers" var="teacher" value="#{teachersController.teachers}" varStatus="it">

        profile picture, infos, etc.

        <p:button id="btn_open_request_form"
                  value="get in touch"
                  onclick="$('#teachers:#{it.index}:request_form').show(300); $(this).hide(); return false;"/>

        <h:form class="request_form" id="request_form" prependId="false">

            Text inputs for email, message...

            <p:button value="#{msg['cancel']}"
                      onclick="$('#teachers:#{it.index}:request_form').hide(300); $('#teachers:#{it.index}:btn_open_request_form').show(); return false;"/>
            <p:commandButton value="send request"
                             process="@form"
                             update="@form"
                             action="#{teachersController.sendRequest(teacher.id)}"
                             oncomplete="$('#teachers:#{it.index}:request_form').hide(300); $('#btn_open_request_form_#{it.index}').show();"
                             />

        </h:form>

        <h:messages></h:messages>
        <br/>
    </ui:repeat>

</ui:define>
</ui:composition>

在第一次尝试中，我使用 c:forEach 而不是 ui:repeat 来遍历教师。 jQuery 的联系人公式和按钮的 showing/hiding 工作正常，但是无法调用 p:commandButton 的操作方法并且没有发送请求，所以我切换到 ui:repeat.

现在，请求已保存到数据库中，但是 hiding/showing 和 Javascript 不再起作用。公式按预期被页面加载隐藏。但是，当单击 "get in touch" 时，按钮本身会按照我的意愿隐藏，但不会显示公式。

我花了一段时间才弄明白 jsf 是如何生成所有 id 的，但我最终通过检查生成的 html 弄明白了。这是按钮生成的html：

<button id="teachers:1:btn_open_request_form"
        name="teachers:1:btn_open_request_form"
        type="button"
        class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
        onclick="$('#teachers:1:request_form').show(300); $(this).hide(); return false;;window.open('/lehrerverzeichnis/faces/requests/teachers.xhtml','_self')">

这里是表格之一：

<form id="teachers:1:request_form"
      name="teachers:1:request_form"
      method="post"
      class="request_form" ...>

我哪里错了？之前，当使用 c:forEach 时，它运行良好（当然使用不同的 id）。但是jQuery函数中的selector匹配了form id，为什么点击按钮后不显示？之后按钮本身会被命令隐藏，因此肯定会调用 onclick 函数。

在我看来，将 Javascript 和 JSF 结合起来并不是一个好主意。我还能做什么？

非常感谢您..

Answer 1

已解决 这只是一个愚蠢的错误。 jQuery 选择器中的分号需要转义。在创建的 html 源中，$('#some:id') 需要是 $('#some\:id')。要保留两个反斜杠，它们也必须在 facelet 中进行转义。所以在 .xhtml 文件中必须写 $('#some\\\:id')，所以冒号前的 4 个反斜杠是必要的，2 个在创建的 html.

这就是为什么我更喜欢 Java，它至少会告诉我问题出在哪里.. :D

Javascript ui:repeat 到 show/hide 中的函数联系公式不起作用

Javascript function inside ui:repeat to show/hide contact formular not working

javascript

uirepeat

jsf-2.2