Refresh page after Inserting data into table and displaying updated table

Question

So I'm trying to create a basic web app using JSF. I have a primefaces table with 2 text inputs to add rows to the table. When I click the add button the row is inserted into the mySQL database.The database is then read and displayed in the table. I want the table to automatically update to display the newly added row but whats happening is I get the loading circle up next to my localhost:8080 tab and I have to close the page and then reopen it from netbeans to get the info to display.

Heres my xhtml

 <?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">

<h1>Climbing Routes</h1>

<h:head>
    <h:outputStylesheet library="css" name="table-style.css"  />
</h:head>

<h:body>

    <p:dataTable value="#{route.getRouteList()}" var="r"
    styleClass="order-table">

        <p:column headerText="Route">   #{r.routeName}</p:column>
    <p:column headerText="Route Grade">  #{r.routeGrade}</p:column>

    </p:dataTable>

    <h:form>

        <h:outputLabel for="txtName">
            <h:outputText value="Enter Route Name"/>
        </h:outputLabel>
        <p:inputText id="txtName" value="#{route.userRouteName}"/>

        <br></br>

        <h:outputLabel for="txtPrice">
            <h:outputText value="Enter Route Grade"/>
        </h:outputLabel>
        <p:inputText id="txtPrice" value="#{route.userRouteGrade}"/>

      <p:commandButton id="insert" value="Add Route" action="#{route.addRoute()}" update=":idform" />
        <p:commandButton id="remove" value="Remove Route" action="#{route.deleteRoute()}" update=":idform"/>


    </h:form>
</h:body>

and my java

@ManagedBean(name="route")
@SessionScoped
public class Product {

private DataSource ds;

    String routeName;
    String routeGrade;  
    String userRouteName;
    String userRouteGrade; 

       public void setUserRouteName(String userRouteName) {
    this.userRouteName = userRouteName;}

public String getUserRouteName() {
    return userRouteName;
}
     public void setUserRouteGrade(String userRouteGrade) {
    this.userRouteGrade = userRouteGrade;}

public String getUserRouteGrade() {
    return userRouteGrade;
}

public String getRouteName() {
    return routeName;
}
public void setRouteName(String routeName) {
    this.routeName = routeName;
}
public String getRouteGrade() {
    return routeGrade;
}
public void setRouteGrade(String routeGrade) {
    this.routeGrade = routeGrade;
}

    public Product(){
    try {
        Context ctx = new InitialContext();
        ds = (DataSource)ctx.lookup("java:comp/env/jdbc/routes");
    } catch (NamingException e) {
        e.printStackTrace();
    }
}

        //connect to DB
public List<Product> getRouteList() throws SQLException{

    if(ds==null)
        throw new SQLException("Can't get data source");

    //get database connection
    Connection con = ds.getConnection();

    if(con==null)
        throw new SQLException("Can't get database connection");

    PreparedStatement ps
        = con.prepareStatement(
           "select routeName, routeGrade from routes");


    ResultSet result =  ps.executeQuery();

    List<Product> list = new ArrayList<>();

    while(result.next()){
        Product route = new Product();

        route.setRouteName(result.getString("routeName"));
        route.setRouteGrade(result.getString("routeGrade"));

        //store all data into a List
        list.add(route);
    }
    return list;
}

    public void addRoute() throws SQLException{
        //get database connection
        Connection con = ds.getConnection();
        Statement stmt = con.createStatement();

        String sql = "INSERT INTO routes(routeName,routeGrade) "
                    + "VALUES('"+userRouteName+"','"+userRouteGrade+"')";

            stmt.executeUpdate(sql);        
    }

    public void deleteRoute() throws SQLException,IOException{
        //get database connection
        Connection con = ds.getConnection();
        Statement stmt = con.createStatement();

        String SQL = "DELETE FROM routes WHERE routeName = '"+userRouteName+"' ";

             stmt.execute(SQL);
        ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
        ec.redirect(((HttpServletRequest) ec.getRequest()).getRequestURI());
    }              
}

I'm sure it's an easy fix but this is my first time ever trying to create a web app. Thanks for any help

Updated the command button code

Hope this helps (you'll need to use AJAX): http://stackoverflow.com/questions/28117109/updating-database-with-jquery-ajax-for-jsp — Tiago Martins Peres, Mar 06 '17 at 20:26
remove `ajax="false"` and use `update=":idForm"` ; also do not forget to make your dataTable inside the form — Yagami Light, Mar 07 '17 at 06:37
so I removed ajax false and tried the update=":idForm" and the row gets added or removed from the database but it still does not show in the table unless I manually refresh the page — zsh5032, Mar 08 '17 at 19:42
Your code contains a several "Don't do this"'s starting with "Don't do any work in getters" http://stackoverflow.com/questions/2090033/why-jsf-calls-getters-multiple-times, secondly your code seems very ''old-school", it is prone to sql injection, you don't seem to have connectionpooling or connection management. Better to start with some good java jpa tutorials — Kukeltje, Mar 09 '17 at 08:45

Refresh page after Inserting data into table and displaying updated table

0 Answers0