如何使用JQuery动态添加Primefaces输入字段_Jquery_Jsf 2_Primefaces

如何使用JQuery动态添加Primefaces输入字段

jquery jsf-2 primefaces

如何使用JQuery动态添加Primefaces输入字段,jquery,jsf-2,primefaces,Jquery,Jsf 2,Primefaces,我正在尝试将Primefaces中的标签和文本字段动态添加到我的网页中。我想使用JQuery。直到现在，我才意识到只有Primefaces才能完成同样的任务，它工作得很好，但我想避免一些行为 <!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" xml

我正在尝试将Primefaces中的标签和文本字段动态添加到我的网页中。我想使用JQuery。直到现在，我才意识到只有Primefaces才能完成同样的任务，它工作得很好，但我想避免一些行为

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


$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.html（“”）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
});

如果这是我的代码中的一个简单错误，我将非常感谢一些关于这个主题的教程提示。这个问题的解决方案。提前感谢：）

看起来您完全没有理解JSF的要点，而且对web开发还比较陌生。JSF是一种服务器端语言/框架，它生成HTML代码（在浏览器中右键单击页面并查看源代码，您现在看到了吗？没有单个JSF标记，它是一个完整的HTML）。jQuery是一种客户端语言，它只适用于HTMLDOM树。

不是已知的HTML元素。浏览器不知道如何处理它。它只知道HTML，比如

和朋友

您需要以“JSF-ish”的方式修复功能需求。以下是一个启动示例：

<h:form>
    <ui:repeat value="#{bean.items}" var="item">
        <p:outputLabel for="foo" value="#{item.label}" />
        <p:inputText id="foo" value="#{item.value}" />
        <p:commandButton value="Remove" action="#{bean.remove(item)}" update="@form" />
        <br/>
    </ui:repeat>
    <p:commandButton value="Add" action="#{bean.add}" update="@form" />
</h:form>

就这些。无需JavaScript混乱，只需添加另一个指向

save（）

方法的命令按钮，即可在服务器端保存所有内容，该方法将

项

变量进一步传递给EJB/service/DAO类

否则，如果您真的想用jQuery的方式来实现，那么您应该完全放弃JSF，转而采用基于请求的方式，比如SpringMVC。你只需要记住，你必须自己写下所有的HTML/CSS/JS

另见：

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Item> items;

    @PostConstruct
    public void init() {
        items = new ArrayList<>();
    }

    public void add() {
        Item item = new Item();
        item.setLabel("label" + items.size());
        items.add(item);
    }

    public void remove(Item item) {
        items.remove(item);
    }

    public List<Item> getItems() {
        return items;
    }

}

public class Item {

    private String label;
    private String value;

    // Let your IDE generate getters/setters/equals/hashCode.
}