Como adicionar dinamicamente campos de entrada do Primefaces com o JQuery
Estou tentando adicionar dinamicamente Rótulos e campos de texto do Primefaces à minha página da web. Eu quero usar o JQuery. Até agora, realizo a mesma tarefa apenas com o Primefaces e funciona muito bem, mas tem algum comportamento que eu quero evitar.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script type="text/javascript">
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function(){
var newTextBoxDiv = $(document.createElement('div')).attr("id",'TextBoxDiv' + counter);
<!--
This line causes trouble. If I use it nothing is rendered on page.
If I use <h:inputText /> the page is rendered but the functionality does
not work
-->
newTextBoxDiv.html("<p:inputText />");
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
</h:head>
<h:body>
<ui:insert>
<ui:include src="/protected/header.xhtml" />
</ui:insert>
<h:form>
<div id="test"></div>
<div id='TextBoxesGroup'></div>
<input type='button' value='Add Button' id='addButton' />
<input type='button' value='Remove Button' id='removeButton' />
</h:form>
</h:body>
</html>
Gostaria de receber algumas dicas sobre tutoriais sobre o assunto ou se é um erro simples no meu código. uma solução para este prob. Agradeço antecipadamente :)