JSF + jQuery: comment réaliser la boîte de commentaires pliables StackOverflow

Question

Je crée un Comment-Reply Système, similaire à Stackoverflow et je me demande comment l'implémenter en utilisant JSF + JQuery. J'ai un dataTable, chaque ligne a un lien et une zone de texte, et Une fois que je clique sur un lien, seule la zone de texte de cette même ligne apparaît et mettez l'accent sur cette zone de texte.

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

Mon principal obstacle est que, l'utilisateur de jQuery normal ferait ceci: laissez le lien id est foo alors

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

Mais comme chaque ligne a un appel de zone de texte reply, il y aura avant reply et foo comme ça userComment:1:foo ou userComment:1:reply. Par conséquent $('#foo') et $('#reply') ne fonctionnerait pas

Answer 1

Utilisation this et replace la voie intelligente.

Par exemple

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

avec

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

La string.replace(/add$/, 'reply') remplacera foo:1:add à foo:1:reply et la fonction appliquée aux premiers PrimeFaces.escapeClientId() L'échappera dans un sélecteur d'identification jQuery valide. Enfin, vous pouvez faire l'accent dans le rappel.