ajaxjsfbootsfaces

Bootsfaces, ajax, jsf and beans


I am working on a school project where I have a front-end-project and a back-end-project. In my front-end-project I am using Bootsfaces version 1.2.0 and jsf. Back-end I have a webservice and a postgres database.

I am trying to add objects (in this case cars) through a form in my front-end-project through my webservice and also delete these objects. My problem is that it only works sometimes (usually just one time). I have tried a lot of different solutions and also browsed google for a few days..

Here is some code (simplified).

Frontend html-page:

            <b:dataTable value="#{leasingCarBean.carList}" var="car"
                id="carsTable">
                <b:dataTableColumn value="#{car.licensenumber}" />
                <b:dataTableColumn value="#{car.brand}" />
                <b:dataTableColumn value="#{car.model}" />
                <b:dataTableColumn value="#{car.color}" />
                <b:dataTableColumn value="#{car.year}" />
                <b:dataTableColumn label="Delete">
                    <b:commandButton value="Delete" onclick="ajax:leasingCarBean.deleteCar(car.licensenumber)" update="carsTable"/>
                </b:dataTableColumn>
            </b:dataTable>


            <b:button size="lg" look="info" value="New car" 
                onclick="$('.modalPseudoClass').modal();ajax:leasingCarBean.createNewCar()"
                />

            <b:modal id="amodal" title="New car" styleClass="modalPseudoClass">
                <h:form>
                    <b:inputText placeholder="Licensenumber"
                        value="#{leasingCarBean.newCar.licensenumber}" />
                    <b:inputText placeholder="Brand"
                        value="#{leasingCarBean.newCar.brand}" />
                    <b:inputText placeholder="Model"
                        value="#{leasingCarBean.newCar.model}" />
                    <b:inputText placeholder="Color"
                        value="#{leasingCarBean.newCar.color}" />
                    <b:inputText placeholder="Year"
                        value="#{leasingCarBean.newCar.year}" />
                </h:form>
                <f:facet name="footer">
                    <b:button value="Close" dismiss="modal" />
                    <b:commandButton value="Add" look="primary" dismiss="modal"
                        onclick="ajax:leasingCarBean.postNewCar()" update="carsTable" />
                </f:facet>
            </b:modal>

Backingbean frontend

@Named
@ViewScoped
public class LeasingCarBean implements Serializable{
   private static final long serialVersionUID = 1L;

   private Cardto newCar;
   private Customerdto newCustomer;

   private WebTarget leasingCarTarget =  ClientBuilder.newClient().target("http://localhost:8080/leasingcarbackend/leasingcar");

   public LeasingCarBean() {}

   @PostConstruct
   public void init() {
       newCar = new Cardto();
       newCustomer = new Customerdto();
   }

   public List<Cardto> getCarList() {
       return leasingCarTarget.path("/carList").request(MediaType.APPLICATION_JSON).get(new GenericType<List<Cardto>>() {});
   }

   public void deleteCar(String licensenumber) {
    leasingCarTarget.path("/deleteCar/{licensenumber}").resolveTemplate("licensenumber", licensenumber).request(MediaType.APPLICATION_JSON).delete();
   }

   public void postNewCar() {
    leasingCarTarget.path("/newCar").request(MediaType.APPLICATION_JSON).post(Entity.json(newCar));
       newCar = null;
   }

   public void createNewCar() {
       newCar = new Cardto();
   }

   public Cardto getNewCar() {
       return newCar;
   }
}

Some of my errors:

  1. When I have added a car, and then click a delete button (on any car in the datatable) it evaluates the wrong EL-expression, leasingCarBean.newCar.licensenumber instead of leasingCarBean.deleteCar(car.licensenumber).

  2. When I press the "New car"-button it invokes the postNewCar-method before I have pressed the "Add"-button, which means I get null-errors because I haven't filled in the form.

  3. Sometimes when i try to add a new car I get this error even though I have filled in the form:

    javax.el.PropertyNotFoundException: /admin/allCars.xhtml @100,57     
    value="#{leasingCarBean.newCar.licensenumber}": Target Unreachable, 'null' returned null
    

Any tips on how to do this? I will be grateful for any help :)

Cheers!


Solution

  • So, I solved my problem and I wanted to post it here if someone else is interested in the solution.

    My html-page:

       //My datatable stays the same
    
                <b:dataTable value="#{leasingCarBean.carList}" var="car"
                    id="carsTable">
                    <b:dataTableColumn value="#{car.licensenumber}" />
                    <b:dataTableColumn value="#{car.brand}" />
                    <b:dataTableColumn value="#{car.model}" />
                    <b:dataTableColumn value="#{car.color}" />
                    <b:dataTableColumn value="#{car.year}" />
                    <b:dataTableColumn label="Delete">
                        <b:commandButton value="Delete" onclick="ajax:leasingCarBean.deleteCar(car.licensenumber)" 
                        oncomplete="javascript:location.reload();"/>
                    </b:dataTableColumn>
                </b:dataTable>
    
    
                <b:button size="lg" look="info" value="New car" 
                    onclick="$('.modalPseudoClass').modal()" /> 
                    //Took away createNewCar()
    
                <b:modal id="amodal" title="New car" styleClass="modalPseudoClass">
                    <h:form>
                        <b:inputText placeholder="Licensenumber"
                            value="#{leasingCarBean.newCar.licensenumber}" />
                        <b:inputText placeholder="Brand"
                            value="#{leasingCarBean.newCar.brand}" />
                        <b:inputText placeholder="Model"
                            value="#{leasingCarBean.newCar.model}" />
                        <b:inputText placeholder="Color"
                            value="#{leasingCarBean.newCar.color}" />
                        <b:inputText placeholder="Year"
                            value="#{leasingCarBean.newCar.year}" />
                    </h:form>
                    <f:facet name="footer">
                        <b:button value="Close" dismiss="modal" />
                        <b:commandButton value="Add" look="primary"
                            onclick="$('.modalPseudoClass').modal('hide');ajax:leasingCarBean.postNewCar()" 
                           //Dismiss modal do not work for commandButton
                            update="carsTable" />
                    </f:facet>
                </b:modal>
    

    Backing bean frontend:

    @Named
    @ViewScoped
    public class LeasingCarBean implements Serializable{
    private static final long serialVersionUID = 1L;
    
    private Cardto newCar;
    private Customerdto newCustomer;
    
    private WebTarget leasingCarTarget = ClientBuilder.newClient().target("http://localhost:8080/leasingcarbackend/leasingcar");
    
    public LeasingCarBean() {}
    
    @PostConstruct
    public void init() {
        newCar = new Cardto();
        newCustomer = new Customerdto();
    }
    
    public List<Cardto> getCarList() {
        return leasingCarTarget.path("/carList").request(MediaType.APPLICATION_JSON).get(new GenericType<List<Cardto>>() {});
    }
    
    public void deleteCar(String licensenumber) {
        leasingCarTarget.path("/deleteCar/{licensenumber}").resolveTemplate("licensenumber", licensenumber).request(MediaType.APPLICATION_JSON).delete();
    }
    
    public void postNewCar() {
        leasingCarTarget.path("/newCar").request(MediaType.APPLICATION_JSON).post(Entity.json(newCar));
        newCar = new Cardto(); //Instead of = null
    }
    
    //This method is not needed anymore
    public void createNewCar() {
        newCar = new Cardto();
    }
    
    public Cardto getNewCar() {
        return newCar;
    }
    

    Hopefully this will help someone in the future :)