Primefaces selectonemenu displaying data outside the input [duplicate]

问题

I'm new to web programming and I manage to make work the proper connections so the dropdown DOES populate; I'm using Eclipse, latest JDK, Wildfly 10 server, MySQL server 5.7, Primefaces 5.3, Javax.faces 2.2.

This is the page:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
      >

<head>
	<title>combobox</title>
</head>
<body>


	<h:form id="form1">
		<p:panel header="Ingreso" style="width: 600px;">
			<h:panelGrid columns="2">
				<h:outputText value="Provincia: " />
				<p:selectOneMenu value="#{Usuario.provincia}" id="prov" 
                                 valueChangeListener="#{Usuario.processCant()}" >
					<f:selectItem itemLabel="Seleccione" itemValue="" />
					<f:selectItems value="#{Usuario.provincias}" />	
					<p:ajax update="cant" event="change" />				
				</p:selectOneMenu>
				
				<h:outputText value="Cantón: " />  
                <p:selectOneMenu value="#{Usuario.canton}" id="cant" valueChangeListener="#{Usuario.processParr()}"> 
                        <f:selectItem itemLabel="Seleccione" itemValue="" />
                        <f:selectItems value="#{Usuario.cantones}"/>
                        <p:ajax update="parr" event="change" />	
                </p:selectOneMenu>
                
                <h:outputText value="Parroquia:  " />  
                <p:selectOneMenu value="#{Usuario.parroquia}" id="parr"> 
                        <f:selectItem itemLabel="Seleccione" itemValue="" />
                        <f:selectItems value="#{Usuario.parroquias}"/>
                </p:selectOneMenu>
                    
			</h:panelGrid>
			
		</p:panel>
	</h:form>
</body>
</html>

And this is the java:

@ManagedBean(name="Usuario")
@SessionScoped
public class Usuario implements Serializable {
    private static final long serialVersionUID = 1L;
    private int ID;
    private String nombre;
    private String apellido;

    private String fecha;
    private String lugar;
    private String numero;
    private String Provincia;
    private List<SelectItem> Provincias; 
    private String Canton;
    private List<SelectItem> Cantones;
    private String Parroquia;
    private List<SelectItem> Parroquias;

    public List<SelectItem> getProvincias() {
        List<SelectItem> catProvincias = new ArrayList<SelectItem>();
        try {
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/schema", "root", "root");
            Statement st = con.createStatement();
            ResultSet rs = null;
            String myQuery = "SELECT Provincia FROM `schema`.provincia;"; 
            rs = st.executeQuery(myQuery);
            while (rs.next()) {
                catProvincias.add(new SelectItem(rs.getString("Provincia")));
            } 
        } catch (Exception ex) {
            ex.printStackTrace();
        } 
        return catProvincias;
    }
    public List<SelectItem> getCantones() {
        List<SelectItem> catCantones = new ArrayList<SelectItem>();
        try {
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/schema", "root", "root");
            Statement st = con.createStatement();
            ResultSet rs = null;
            String myQuery = "SELECT Canton FROM `schema`.Canton WHERE Padre=(select Provincia from `schema`.Provincia where Provincia='"+ Provincia + "')";

            rs = st.executeQuery(myQuery);
            while (rs.next()) {
                catCantones.add(new SelectItem(rs.getString("Canton")));
            } 
        } catch (Exception ex) {
            ex.printStackTrace();
        } 
        return catCantones;
    }
    public List<SelectItem> getParroquias() {
        List<SelectItem> catParroquias = new ArrayList<SelectItem>();
        try {
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/schema", "root", "root");
            Statement st = con.createStatement();
            ResultSet rs = null;
            String myQuery = "SELECT Parroquia FROM `schema`.parroquia WHERE Padre=(select Canton from `schema`.Canton where Canton='"+ Canton +"')";
            rs = st.executeQuery(myQuery);
            while (rs.next()) {
                catParroquias.add(new SelectItem(rs.getString("Parroquia")));
            } 
        } catch (Exception ex) {
            ex.printStackTrace();
        } 
        return catParroquias;
    }
    public void processCant() {
        getCantones();
    }
    public void processParr() {
        getParroquias();
    }

...

And this is the result:

As you can see the data shows duplicated outside, there's an unexisting inputText shown and the style does look like Primefaces at all, I have no idea what is happening, please advice.

回答1:

You have to replace the <head></head> tags with the jsf specific <h:head></h:head> tags to get PrimeFaces to import all necessary js and css files.

来源：https://stackoverflow.com/questions/36829952/primefaces-selectonemenu-displaying-data-outside-the-input

标签

jsf

primefaces

selectonemenu