0

I am new to primefaces and I am using the latest version 6.2. Following the guidelines on the user guide I have created a template using 2 forms (one for each layoutunit) setting different ID for each form. 

<?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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui">
    <ui:composition>
        <h:head>
            <title>#{messages.appname}</title>
            <link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />
        </h:head>
        <body>

                <p:layout fullPage="true" id="myPage">
                    <p:layoutUnit id="up" position="north" size="130" header="" resizable="true" closable="false" collapsible="true">
                        <h:form id="upform">
                            <ui:include src="/templates/top.xhtml" />
                        </h:form>                       
                    </p:layoutUnit>
                    <p:layoutUnit id="center" position="center">
                        <h:form id="centerform">
                            <ui:include src="/templates/center.xhtml" />
                        </h:form>               
                    </p:layoutUnit>
                    <p:layoutUnit id="down" position="south" size="60" header="" resizable="true" closable="true" collapsible="true">
                        <h:outputText value="© 2018 - IT" />
                    </p:layoutUnit>
                </p:layout>

        </body>
    </ui:composition>
</html>

My problem is that when I load the page in Chrome and I inspect the elements, Chrome is complaining for DOM,as it tracks 2 elements with non-unique ID.

​login.xhtml:1 [DOM] Found 2 elements with non-unique id #j_id1:javax.faces.ViewState:0: (More info:) <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla" autocomplete=..."off">... <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla 2" autocomplete=..."off">...

As I suspect that this will cause javascript problems - how can I overcome this?

Mitsos
  • 63
  • 1
  • 7
  • So you tried without a layout, without the includes ets as well and it is no problem then? And you manually checked the client-side html to see if Chrome is right? And please improve your title.... – Kukeltje Feb 01 '19 at 09:22
  • I added a single form enclosing layout and I do not get errors - but this is not correct according to PF manual: "When working with forms and full page layout, avoid using a form that contains layoutunits as generated dom may not be the same" – Mitsos Feb 01 '19 at 09:24
  • Correct, 'god forms' are evil https://stackoverflow.com/questions/7371903/how-to-use-hform-in-jsf-page-single-form-multiple-forms-nested-forms especially in combination with layout component. But the layout component is also deprecated in favour of plain html solutions that you can find all over the internet. The advantage of having it in a jsf component has been too little for this component. but there were many other questions in my comment. Try them.... – Kukeltje Feb 01 '19 at 09:27

0 Answers0