search

TheCoder4eu / BootsFaces-OSP

BootsFaces - Open Source Project
Apache License 2.0
246 stars 102 forks source link

Datatable creates additional columns #914

Closed dx325 closed 6 years ago

dx325 commented 6 years ago

Hi guys, im pretty new in JSF/html coding and have a decent Problem with datatables. I just created a datatable and it looks fine, but it creates an additional column for every column I create. The columns are named "column#1, column#2 etc.."

problem

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
<b:container fluid="true">

    <h:body>
        <ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="title">Users
</ui:define>
            <ui:define name="content">           
                <b:form>                                    
                    <b:column medium-screen="2">

                        <b:inputText id="email" value="#{usersBean.user.email}" autocomplete="off"
                         required="true"  requiredMessage="Die E-Mail darf nicht leer sein." label="Email"/>

                        <b:inputSecret id="password" value="#{usersBean.user.password}" autocomplete="off"
                         required="true"  requiredMessage="Das Passwort darf nicht leer sein." label="Passwort"/>

                        <b:inputText id="firstname" value="#{usersBean.user.firstname}" autocomplete="off"
                         required="true"  requiredMessage="Der Vorname darf nicht leer sein." label="Vorname"/>

                        <b:inputText id="lastname" value="#{usersBean.user.lastname}" autocomplete="off"
                         required="true"  requiredMessage="Der Nachname darf nicht leer sein." label="Nachname"/> 
                    </b:column>
                    <b:row>
                    <b:commandButton value="Save" action="#{usersBean.save}" />
                    </b:row>
                </b:form>        
<h:form>
<b:dataTable  value="#{usersBean.getAll()}" var="a">
    <b:dataTableColumn value="#{a.id}" label="swag" /> 
  </b:dataTable>
</h:form>

 </ui:define>
</ui:composition>

    </h:body>
    </b:container>
</html>
chongma commented 6 years ago

in your example you didn't terminate the <b:dataTable> or the <h:form> e.g.

<h:form>
<b:dataTable  value="#{usersBean.getAll()}" var="a">
    <b:dataTableColumn value="#{a.id}" label="swag" />
</b:dataTable>
</h:form>
dx325 commented 6 years ago

Sorry, I updated the post. Forgot to copy it because I had to hurry up.

chongma commented 6 years ago

b:container should always be inside h:body

dx325 commented 6 years ago

Ok thanks, but this also did not fixed the bug.. I really don't unterstand this problem..

chongma commented 6 years ago

I think the doctype declaration should always be <!DOCTYPE html> although I do not think this would cause the problem. Does your template also define the html elements again?

dx325 commented 6 years ago

yeah, this is the template Code:

<?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://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">

    <h:head>
        <title><ui:insert name="title">Grades</ui:insert></title>
    </h:head>
    <h:body rendered="#{loginBean.isLoggedIn()}">
        <div id="top" class="top">
            <b:form id="menue">
                <b:button id="gradesLink" value="Grades" outcome="/grades" />
                <b:commandButton id="logoutButton" value="Abmelden" action="#{loginBean.logout()}" />
            </b:form>
        </div>
        <div id="main_content" class="main_content">
            <ui:insert name="content" />
        </div>
    </h:body>
    <h:body rendered="#{!loginBean.isLoggedIn()}">
        <p><b:link value="Du musst Dich erst anmelden." outcome="/index" /></p>
    </h:body>
</html>
chongma commented 6 years ago

then your original code should be like 

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui" template="/WEB-INF/template.xhtml">
     <ui:define name="title">Users</ui:define>
     <ui:define name="content">
          <b:container fluid="true">
...your contents
          </b:container>
    </ui:define>
</ui:composition>

and your template like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <title><ui:insert name="title">Grades</ui:insert></title>
    </h:head> 
    <h:body>
    <ui:fragment rendered="#{loginBean.isLoggedIn()}">
...
    </ui:fragment>
    <ui:fragment rendered="#{!loginBean.isLoggedIn()}">
...
    </ui:fragment>
    </h:body>
</html>

although i am not sure it will fix the b:dataTable

dx325 commented 6 years ago

Unfortunately its not fixing it... It really does not make any sense lol

chongma commented 6 years ago

not sure how it might be related to the problem with b:dataTable but can you post some of your bean code? your b:dataTable has a value of usersBean.getAll() which is not what i would expect.

if your bean had this format:

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

    @Inject
    private UserDao userDao;

    private List<User> all;

    public String onload() {
        setAll(userDao.select());
        return null;
    }

    public List<User> getAll() {
        return all;
    }

    public void setAll(List<User> all) {
        this.all = all;
    }
}

then i would expect it to be <b:dataTable var="user" value="#{usersBean.all}">... because the getter would handle the retrieval without explicitly using getAll()

Perhaps if you paste the html of the generated table it might help diagnose the issue

dx325 commented 6 years ago

Yes, the bean Looks exactly like that. But it also didnt fixed the Problem.

<th tabindex="0" class="sorting" aria-controls="j_idt13:j_idt14" style="width: 37px;" aria-label="Id: aktivieren, um Spalte aufsteigend zu sortieren" rowspan="1" colspan="1">swag</th>
<th tabindex="0" class="sorting" aria-controls="j_idt13:j_idt14" style="width: 124px;" aria-label="Column #1: aktivieren, um Spalte aufsteigend zu sortieren" rowspan="1" colspan="1">Column #1</th>
chongma commented 6 years ago

can you try commenting out the whole b:form above the b:dataTable and see if it has any effect? also, just a thought...

<Parameter name="javax.faces.PROJECT_STAGE" value="Development"
        override="true" />
<Parameter name="javax.faces.FACELETS_REFRESH_PERIOD" value="0"
        override="true" />
<Parameter name="javax.faces.FACELETS_SKIP_COMMENTS" value="true"
        override="true" />

have you set any of these parameters in your context.xml or web.xml? development stage will give you error messages. refresh period will redeploy your xhtml. skip comments will ignore any commented code (otherwise it will be processed)

dx325 commented 6 years ago

Hi, sorry for my late response.
Yes, 2 of these Parameters were set but they dont make any difference.

Interestingly , I cant reach the page if the b:form is outcommented. (I see an empty page) The Code just Looks like this; I dont see the Problem..

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">

    <h:body>
        <ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="title">Benutzerverwaltung</ui:define>
            <ui:define name="content">

<b:form>
<b:dataTable value="#{usersBean.allUsers}" var="u">
    <b:dataTableColumn value="#{u.id}" /> 
    <b:dataTableColumn value="#{u.email}" /> 
    <b:dataTableColumn value="#{u.firstname}" /> 
    <b:dataTableColumn value="#{u.lastname}" />
    <b:dataTableColumn value="#{u.password}"/> 
  </b:dataTable>
</b:form>

 </ui:define>
</ui:composition>

    </h:body>
</html>
chongma commented 6 years ago

could you send me a private gist of the exact code of your xhtml?

stephanrauh commented 6 years ago

@dx325 Sorry for the late answer. I'm trying to reproduce your bug report without success.

The additional column is rendered if there's a column without label. In this case, it's not really an additional column, because it just fills the gap of the missing <th> tag.

I suspect you've been using a buggy version of BootsFaces. Do you still have the problem, and if so, which version of BootsFaces are you using?

For the moment, I'll close the ticket because I couldn't reproduce it. But we're still listening to the channel :).

bonndan commented 4 years ago

This behavior can be observed for instance when putting html comments between dataTableColumn tags. Even in the latest version 1.4.2

wearingart commented 4 years ago

I'm also seeing this same behavior in 1.4.2. An extra blank column is being added. EDIT: I figured out why it was adding an extra column in my case. I had a commented out line

between two tags. When I removed the comment, the table was generated correctly.