`<b:commandButton>` does not work properly with `ajax=true` #145

ahofmeister · 2015-07-28T20:56:55Z

It is a bit complicated. You may want to just copy and paste my example. I will try to explain it:
I got this example (just an minimal example to reproduce) from BalusC

It is about CRUD functionality in datatables. The idea is, to create an Item which is automatically add to the list. And you can edit items aswell (and save them). This does work quite nice! You may have a look at this link, but you don't have to. As you can see below, the bean is exactly copy and paste. In my xhtml, there are three buttons to edit an Item. The button with BootsFaces does not work. The other two, are working perfectly fine. I really want to use <b:commandButton> here.
Here is my *.xhtml

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:b="http://bootsfaces.net/ui" xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
    <title>Really simple CRUD</title>
    </h:head>
    <h:body>
    <h3>List items</h3>
    <h:panelGroup rendered="#{empty bean.list}">
        <p>Table is empty! Please add new items.</p>
    </h:panelGroup>
    <h:panelGroup id="panelAdd">

        <h:form id="formAdd" rendered="#{!bean.edit}">
            <h3>Add item</h3>
            <p>
                Value:
                <h:inputText value="#{bean.item.value}" />
            </p>
            <p>
                <h:commandButton value="add" action="#{bean.add}" />
            </p>
        </h:form>
    </h:panelGroup>
    <h:panelGroup id="panelEdit">

        <h:form id="formEdit" rendered="#{bean.edit}">
            <h3>Edit item #{bean.item.id}</h3>
            <p>
                Value:
                <h:inputText value="#{bean.item.value}" />
            </p>
            <p>
                <h:commandButton value="save" action="#{bean.save}" />
            </p>
        </h:form>
    </h:panelGroup>
    <h:form rendered="#{not empty bean.list}">
        <h:dataTable value="#{bean.list}" var="item">
            <h:column>
                <f:facet name="header">ID</f:facet>#{item.id}</h:column>
            <h:column>
                <f:facet name="header">Value</f:facet>#{item.value}</h:column>
            <h:column>
                <b:commandButton value="edit bf (not working)"
                    action="#{bean.edit(item)}"
                    update=":panelEdit :panelAdd :formEdit :formAdd" ajax="true" />

                <p:commandButton value="edit pf (working)"
                    action="#{bean.edit(item)}"
                    update=":panelEdit :panelAdd :formEdit :formAdd" ajax="true" />

                <h:commandButton value="edit with jsf ajax (working)"
                    action="#{bean.edit(item)}">
                    <f:ajax render=":panelEdit :panelAdd :formEdit :formAdd"
                        execute="@form" />
                </h:commandButton>
            </h:column>
            <h:column>
                <h:commandButton value="delete" action="#{bean.delete(item)}" />
            </h:column>
        </h:dataTable>
    </h:form>

    </h:body>
    </html>

And here is the backing bean:

    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.List;

    import javax.annotation.PostConstruct;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.ViewScoped;

    @ManagedBean 
    @ViewScoped
    public class Bean implements Serializable {

    private List<Item> list;
    private Item item = new Item();
    private boolean edit;

    @PostConstruct
    public void init() {
        // list = dao.list();
        // Actually, you should retrieve the list from DAO. This is just for
        // demo.
        list = new ArrayList<Item>();
        list.add(new Item(1L, "item1"));
        list.add(new Item(2L, "item2"));
        list.add(new Item(3L, "item3"));
    }

    public void add() {
        // dao.create(item);
        // Actually, the DAO should already have set the ID from DB. This is
        // just for demo.
        item.setId(list.isEmpty() ? 1 : list.get(list.size() - 1).getId() + 1);
        list.add(item);
        item = new Item(); // Reset placeholder.
    }

    public void edit(Item item) {
        this.item = item;
        edit = true;
    }

    public void save() {
        // dao.update(item);
        item = new Item(); // Reset placeholder.
        edit = false;
    }

    public void delete(Item item) {
        // dao.delete(item);
        list.remove(item);
    }

    public List<Item> getList() {
        return list;
    }

    public Item getItem() {
        return item;
    }

    public boolean isEdit() {
        return edit;
    }
    }

    // Other getters/setters are actually unnecessary. Feel free to add them though.

And finally the item:

    public class Item {

    private long id;
    private String value;

    public Item() {
        // TODO Auto-generated constructor stub
    }

    public Item(long id, String value) {
        super();
        this.id = id;
        this.value = value;
    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    }

The text was updated successfully, but these errors were encountered:

stephanrauh · 2015-07-28T21:14:01Z

Most likely that's the same problem as #135.

ahofmeister · 2015-07-28T21:26:36Z

Is there any workaround while using <b:commandButton> ?

stephanrauh · 2015-07-28T21:28:15Z

update="@form", I guess. Just a far shot.

ahofmeister · 2015-07-28T21:34:11Z

Too far, my friend. There are multiple, separated forms. If you click on edit while using update="@form", it will update the <h:dataTable>. That doesn't make any sense. The edit-button should update two panels: panelEdit and panelAdd (or the specific forms).

stephanrauh · 2015-08-10T20:06:00Z

Fixed as of BootsFaces 0.8.0. It should work with the current developer snapshot (see #151 ).

stephanrauh added bug confirmed labels Jul 28, 2015

stephanrauh added this to the v0.8.0 milestone Jul 28, 2015

stephanrauh self-assigned this Jul 28, 2015

stephanrauh closed this as completed Aug 10, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`<b:commandButton>` does not work properly with `ajax=true` #145

`<b:commandButton>` does not work properly with `ajax=true` #145

ahofmeister commented Jul 28, 2015

stephanrauh commented Jul 28, 2015

ahofmeister commented Jul 28, 2015

stephanrauh commented Jul 28, 2015

ahofmeister commented Jul 28, 2015

stephanrauh commented Aug 10, 2015

<b:commandButton> does not work properly with ajax=true #145

<b:commandButton> does not work properly with ajax=true #145

Comments

ahofmeister commented Jul 28, 2015

stephanrauh commented Jul 28, 2015

ahofmeister commented Jul 28, 2015

stephanrauh commented Jul 28, 2015

ahofmeister commented Jul 28, 2015

stephanrauh commented Aug 10, 2015

`<b:commandButton>` does not work properly with `ajax=true` #145

`<b:commandButton>` does not work properly with `ajax=true` #145