JSF + JQuery: come ottenere la casella di commenti collapdibili stackoverflow

Question

Sto creando un Comment-Reply Sistema, simile a StackOverflow e mi chiedo come implementarlo usando JSF + JQuery. Ho un dati dati, ogni riga ha un collegamento e una casella di testo e Una volta fatto clic su un link, appare solo la casella di testo su quella stessa riga e mi metti a fuoco su quella casella di testo.

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

Il mio principale ostacolo è che, il normale utente jQuery farebbe questo: assumiamo il collegamento id è foo poi

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

Ma poiché ogni riga ha una chiamata di testo reply, ci sarà prima prepensid reply e foo come questo userComment:1:foo o userComment:1:reply. Perciò $('#foo') e $('#reply') non funzionerebbe

Answer 1

Uso this e replace Il modo intelligente.

Per esempio

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

insieme a

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

Il string.replace(/add$/, 'reply') sostituirà foo:1:add a foo:1:reply e la funzione fornita da Prime Faces PrimeFaces.escapeClientId() Fuggirà in un selettore ID jQuery valido. Infine, puoi focalizzare nel callback.