JSF + jQuery：stackoverflowの折りたたみ式コメントボックスの達成方法

Question

私はAを作成しています 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, 、以前にプレプリペンディッドがいるでしょう reply と foo このような userComment:1:foo また userComment:1:reply. 。したがって $('#foo') と $('#reply') うまくいきません

Answer 1

使用する 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-Supplied関数 PrimeFaces.escapeClientId() 有効なjQuery IDセレクターに逃げます。最後に、コールバックでフォーカスを行うことができます。