JSF + JQuery: So erreichen Sie Stackoverflow Collapsible Kommentarbox

Question

Ich erstelle a Comment-Reply System, ähnlich wie bei Stackoverflow und ich frage mich, wie man es mit JSF + JQuery implementiert. Ich habe eine DataTable, jede Zeile hat einen Link und ein Textfeld und Sobald ich auf einen Link klicke, wird nur das Textfeld in derselben Zeile angezeigt und konzentriert mich auf dieses Textfeld.

<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>

Mein Haupthindernis ist, dass der normale JQuery -Benutzer dies tun würde: Nehmen Sie den Link an id ist Foo dann

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

Aber da jede Zeile einen Textbox -Anruf hat reply, Es wird vorher vorbereitet sein reply und foo so was userComment:1:foo oder userComment:1:reply. Deswegen $('#foo') und $('#reply') würde nicht funktionieren

Answer 1

Verwenden this und replace der intelligente Weg.

Z.B

<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>

mit

<script>
    function showReply(link) {
        jQuery(PrimeFaces.escapeClientId(link.id.replace(/add$/, 'reply'))).slideDown(function() {
            jQuery(this).focus();
        });
    }
</script>

Das string.replace(/add$/, 'reply') wird ersetzen foo:1:add zu foo:1:reply und die von Primefaces unterstützte Funktion PrimeFaces.escapeClientId() wird ihm in einen gültigen JQuery -ID -Selektor entkommen. Schließlich können Sie den Fokus im Rückruf leisten.