JQueryでPrimeface入力フィールドを動的に追加する方法


Answers

Question

Primefacesから私のWebページにラベルとテキストフィールドを動的に追加しようとしています。 私はJQueryを使いたい。 これまではPrimefaceだけで同じタスクを実現していましたが、それはかなりうまく動作しますが、避けたいものがいくつかあります。

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

私は、このチュートリアルのヒントや、それが私のコードの単純なエラーであるかどうかを知っています。 この問題の解決策。 前もって感謝します :)