JSF + jQuery:如何实现StackOverFlow可折叠评论框
-
27-09-2019 - |
题
我正在创建一个 Comment-Reply
系统,类似于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>
我的主要障碍是,普通 jQuery 用户会这样做:假设链接 id
是 富 然后
$('#foo').click(function(){
//Make the box with id `reply` appear and put focus on it
});
但由于每一行都有一个文本框调用 reply
,前面会有prependId reply
和 foo
像这样 userComment:1:foo
或者 userComment:1:reply
. 。所以 $('#foo')
和 $('#reply')
行不通
解决方案
使用 this
和 replace
聪明的方法。
例如。
<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>
这 string.replace(/add$/, 'reply')
将取代 foo:1:add
到 foo:1:reply
和 PrimeFaces 提供的函数 PrimeFaces.escapeClientId()
会将其转义为有效的 jQuery ID 选择器。最后就可以在回调中做焦点了。
不隶属于 StackOverflow