JSF + jQuery: как добиться разборного комментариев Stackoverflow

Question

Я создаю Comment-Reply Система, похожая на Stackoverflow и интересно, как реализовать его с помощью JSF + jQuery. У меня есть DataTable, каждая строка имеет ссылку и текстовое поле, а также Как только я нажимаю ссылку, появляется только текстовое поле на той же строке, и поместите фокус на этом текстовом поле.

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

Мое главное препятствие это то, что обычный пользователь jQuery сделает это: позвольте взять на себя ссылку id является фюра тогда

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

Но поскольку каждая строка имеет текстовый ящик reply, там будет предплата reply а также foo так userComment:1:foo или userComment:1:reply. Отказ Следовательно $('#foo') а также $('#reply') не будет работать

Answer 1

Использовать this а также replace умный путь.

Например

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

с участием

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

То string.replace(/add$/, 'reply') заменит foo:1:add к foo:1:reply и предоставленные основы PrimeFaces.escapeClientId() избежит его в действительный селектор ID jQuery. Наконец, вы можете сделать фокус в обратном вызове.