JSF + JQuery: Cómo lograr el cuadro de comentarios de Stackoverflow Plegable

Question

Estoy creando un Comment-Reply Sistema, similar a StackOverflow y me pregunto cómo implementarlo usando JSF + JQuery. Tengo un datos de datos, cada fila tiene un enlace y un cuadro de texto, y Una vez que hago clic en un enlace, solo aparece el cuadro de texto en esa misma fila y pongo enfoque en ese cuadro de texto.

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

Mi principal obstáculo es que el usuario normal de jQuery haría esto: Suponga el enlace id es foo después

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

Pero dado que cada fila tiene una llamada de cuadro de texto reply, habrá prependid antes reply y foo como esto userComment:1:foo o userComment:1:reply. Por lo tanto $('#foo') y $('#reply') no funcionaría

Answer 1

Usar this y replace El camino inteligente.

P.ej

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

con

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

los string.replace(/add$/, 'reply') reemplazará foo:1:add a foo:1:reply y la función suplicada de primefaces PrimeFaces.escapeClientId() Lo escapará en un selector de ID de jQuery válido. Finalmente, puede enfocarse en la devolución de llamada.