JSF + jQuery: comment réaliser StackOverFlow boîte de commentaires pliable

Question

Je crée un système Comment-Reply, similaire à stackoverflow et je me demande comment l'implémenter en utilisant JSF + jQuery. J'ai un dataTable, chaque ligne a un lien et un textBox, et une fois que je clique sur un lien, seulement la zone de texte sur cette même ligne apparaît, et mettre 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, utilisateur normal jQuery ferait ceci: supposons le lien id est foo puis

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

Mais puisque chaque ligne a un appel textbox reply, il y aura Soyez prependId avant reply et foo comme ceci userComment:1:foo ou userComment:1:reply. Par conséquent $('#foo') et $('#reply') ne fonctionnerait pas

Answer 1

Utilisez this et replace la manière intelligente.

E.g.

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

Le string.replace(/add$/, 'reply') remplacera foo:1:add à foo:1:reply et la fonction PrimeFaces.escapeClientId() PrimeFaces-fournis échapperont dans un sélecteur ID jQuery valide. Enfin, vous pouvez faire le focus dans le rappel.