UI中的Javascript函数：重复显示/隐藏联系人公式不工作

Question

我有一个facelet可以动态地列出从数据库加载的老师的姓名，个人资料图片等。每个列出的老师都有自己的联系公式，在页面加载后会被隐藏，还有一个按钮“联系”，点击后会打开下面的联系公式并隐藏按钮“联系”。该公式有一些文本字段和一个提交按钮“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显示/隐藏联系人公式和按钮的工作很好，但是p：commandButton的操作方法无法调用，也没有发送请求，所以我切换到ui：repeat。

现在，请求被保存到数据库中，但是用Javascript隐藏/显示不再起作用了。公式被pageload隐藏。但是，当点击“取得联系”时，按钮本身会被隐藏，就像我想要的那样，但是没有显示任何公式。

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

非常感谢你..

Answer 1

这只是个愚蠢的错误。jQuery选择器中的分号需要转义。在创建的html源中，$('#some:id')需要为$('#some\:id')。若要保留两个反斜杠，则必须在facelet中进行转义。所以在.xhtml文件中必须写入$('#some\\\:id')，所以冒号前必须有4个反斜杠，这样才能在创建的HTML中保留2个。

这就是为什么我更喜欢Java的原因，它至少能告诉我问题出在哪里…：d