1

我正在创建一个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然后

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

但是由于每一行都有一个文本框调用reply，所以前面会有 prependIdreply和foo这样的userComment:1:fooor userComment:1:reply。因此$('#foo')并且$('#reply')不会工作

4

1 回答 1

3

使用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 选择器。最后，您可以在回调中做焦点。

于 2010-10-29T01:27:16.217 回答