如何使用JQuery动态添加Primefaces输入字段 [英] How to dynamically add Primefaces inputfields with JQuery
问题描述
我正在尝试将Primefaces中的标签和文本字段动态添加到我的网页. 我想使用JQuery.到目前为止，我仅使用Primefaces即可实现相同的任务，并且效果很好，但有一些我想避免的行为.
I am trying to dynamically add Labels and textfields from Primefaces to my webpage. I want to use JQuery. Until now I realize the same task with Primefaces only and it works quite well but has some beahaviour I want to avoid.
<!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>
对于有关该主题的教程，或者如果这是我的代码中的简单错误，我将不胜感激.这个问题的解决方案.预先谢谢你:)
I would appreciate some hints on tutorials on the subject or if it is a simple error in my code. a solution for this prob. Thank you in advance :)
推荐答案
看起来您完全错过了JSF的要点，并且对于Web开发来说是相当新的. JSF是一种服务器端语言/框架，可产生HTML代码(在浏览器中单击鼠标右键并执行查看源代码，您现在看到了吗?没有一个JSF标记，它是一个HTML代码). jQuery是一种客户端语言，仅与HTML DOM树一起使用. <p:inputText>不是已知的HTML元素.浏览器不知道如何处理.它只知道<input>和朋友之类的HTML.
Looks like you completely missed the point of JSF and are rather new to web development. JSF is a server side language/framework which produces HTML code (rightclick page in browser and do View Source, do you see it now? no single JSF tag, it's one and all HTML). jQuery is a client side language which works with HTML DOM tree only. The <p:inputText> is not a known HTML element. The browser don't have any idea how to deal with it. It only knows HTML like <input> and friends.
您需要以"JSF式"的方式满足功能要求.这是一个启动示例:
You need to salvage the functional requirement in a "JSF-ish" way. Here's a kickoff example:
<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>
使用
@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.
}
仅此而已.只需添加另一个指向save()方法的命令按钮，该命令就可以将items变量进一步传递给EJB/service/DAO类，而无需将JavaScript弄糟，并且所有内容都可以保存在服务器端.
That's all. No JavaScript mess necessary and everything is ready for save in server side by just adding another command button pointing to a save() method which passes the items variable further to the EJB/service/DAO class.
否则，如果您真的想使用jQuery方式，则应该完全删除JSF并使用基于请求的内容(例如Spring MVC).您只需要记住，您必须自己写下所有HTML/CSS/JS.
Otherwise, if you really want to do it the jQuery way, then you should drop JSF altogether and go for something request-based like Spring MVC. You only need to keep in mind that you've to write down all that HTML/CSS/JS yourself.
