1

私はComment-Replystackoverflowに似たシステムを作成していますが、JSF+jQueryを使用してシステムを実装する方法を考えています。dataTableがあり、各行にリンクとテキストボックスがあります。リンクをクリックすると、同じ行のテキストボックスのみが表示され、そのテキストボックスにフォーカスが移ります。 

<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
});

ただし、各行にはテキストボックス呼び出しがあるため、このまたはの前にreplyprependIdがあります。したがって、機能しませんreplyfoouserComment:1:foouserComment: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()はそれを有効なjQueryIDセレクターにエスケープします。最後に、コールバックでフォーカスを行うことができます。

于 2010-10-29T01:27:16.217 に答える