JSF + JQuery: Como alcançar a caixa de comentários colapsível Stackoverflow

Question

Estou criando um Comment-Reply Sistema, semelhante ao StackOverflow e me pergunto como implementá -lo usando JSF + JQuery. Eu tenho um datatable, cada linha tem um link e uma caixa de texto, e Depois de clicar em um link, apenas a caixa de texto na mesma linha aparece e coloco foco nessa caixa 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>

Meu principal obstáculo é que, o usuário normal do jQuery faria isso: vamos supor o link id é foo então

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

Mas como cada linha tem uma chamada de caixa de texto reply, haverá precendido antes reply e foo assim userComment:1:foo ou userComment:1:reply. Portanto $('#foo') e $('#reply') não funcionaria

Answer 1

Usar this e replace da maneira inteligente.

Por exemplo

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

com

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

o string.replace(/add$/, 'reply') Irá substituir foo:1:add para foo:1:reply e a função fornecida pela PrimeFaces PrimeFaces.escapeClientId() irá escapar de um seletor de ID de jQuery válido. Finalmente, você pode fazer o foco no retorno de chamada.