JSF+；jQuery：如何实现StackOverFlow可折叠注释框

我正在创建一个类似于stackoverflow的

评论回复

系统，我想知道如何使用JSF+jQuery实现它。我有一个数据表，每一行都有一个链接和一个文本框，单击链接后，只有同一行上的文本框出现，并将焦点放在该文本框上。

<h:form id="userComment">
    <p:dataTable value="bean.comments">
         <p:column>
              <!-- link that if u click on it, the textbox below appear -->
              <h:inputTextarea id="reply" />      
         </p:column>
    </p:dataTable>
</h:form>

---

但是由于每一行都有一个文本框调用

reply

，所以在

reply

和

foo

之前会有prependId，就像这样

userComment:1:foo

或

userComment:1:reply

。因此，

$（'foo'）

和

$（'reply'）

将不起作用

使用

此

和

替换

智能方式

例如

添加答复

与

功能showReply（链接）{
jQuery（PrimeFaces.escapeClientId（link.id.replace（/add$/，'reply'））.slideDown（function（）{
jQuery（this.focus（）；
});
}

---

string.replace（/add$/，'reply'）

将替换

foo:1:add

到

foo:1:reply

，PrimeFaces提供的函数

PrimeFaces.escapeClientId（）

将其转义到有效的jQuery ID选择器中。最后，您可以在回调中进行聚焦。

使用

class

属性。元素

id

s必须是唯一的；类可以重复。我的要求是，只显示与我单击的链接位于同一行的文本框。能帮我解决那个问题吗？它真漂亮。非常感谢。现在有一件事我觉得很有趣，如果我有一个与外部

h:form

类似的JSF，那么我会得到这个警告

表单组件需要在其祖先中有一个UIForm。建议：将必要的组件装入

。所以我必须有第二个

h:form

，包装在

h:inputTextarea

内，然后警告消失。奇怪的

$('#foo').click(function(){
    //Make the box with id `reply` appear and put focus on it
});

<h:form>
    <p:dataTable value="#{bean.comments}" var="comment">
        <p:column>
            <h:outputText value="#{comment.text}" />
            <h:outputLink id="add" value="#" onclick="showReply(this)">Add reply</h:outputLink>
            <h:inputTextarea id="reply" value="#{comment.reply}" style="display:none;" />
        </p:column>
    </p:dataTable>
</h:form>

<script>
    function showReply(link) {
        jQuery(PrimeFaces.escapeClientId(link.id.replace(/add$/, 'reply'))).slideDown(function() {
            jQuery(this).focus();
        });
    }
</script>