本文介绍了JSF + jQuery:如何实现StackOverFlow可折叠注释框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在创建一个Comment-Reply系统,类似于stackoverflow,我想知道如何使用JSF + jQuery来实现它.我有一个dataTable,每行都有一个链接和一个textBox,并且单击链接后,仅出现同一行上的文本框,并将焦点放在该文本框上.

I am creating a Comment-Reply system, similar to stackoverflow and I wonder how to implement it using JSF + jQuery. I have a dataTable, each row have a link and a textBox, and once I click a link, only the textbox on that same row appear, and put focus on that textbox.

<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 ,然后

My main obstacle is that, normal jQuery user would do this: let assume the link id is foo then

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

但是,由于每一行都有一个文本框调用reply,因此像userComment:1:foouserComment:1:reply这样,在replyfoo之前将有prependId.因此$('#foo')$('#reply')将不起作用

But since each row has a textbox call reply, there will be prependId before reply and foo like this userComment:1:foo or userComment:1:reply. Therefore $('#foo') and $('#reply') would not work

推荐答案

聪明地使用thisreplace.

例如

<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选择器.最后,您可以将焦点放在回调中.

The string.replace(/add$/, 'reply') will replace foo:1:add to foo:1:reply and the PrimeFaces-supplied function PrimeFaces.escapeClientId() will escape it into a valid jQuery ID selector. Finally, you can do the focus in the callback.

这篇关于JSF + jQuery:如何实现StackOverFlow可折叠注释框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-22 21:59