How to dynamically add Primefaces inputfields with JQuery

Question

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

score 6 · Answer 1 · edited May 23 '17 at 12:15

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.

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>

with

@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;
    }

}

and

public class Item {

    private String label;
    private String value;

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

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.

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.

How to dynamically add Primefaces inputfields with JQuery

1 Answers1

See also:

Linked