primefaces mobile views navigation

Question

i'm making my first primefaces mobile site and i have a strange behaviour with views

<pm:page>
    <pm:view id="viewName">
        <ui:include src="home.xhtml" />
    </pm:view>
    <pm:view id="otherView">
        <ui:include src="viewWhereThereIsTheForm.xhtml" />
    </pm:view>
</pm:page>

if i use a commandButton (either h: or p:) in the second view (otherView) the page will reload and the first view (viewName) will be shown, everytime even if there are required elements in the form where there's the button

examples:

<h:form>

    <h:inputText value="#{upload.something}" required="true" />

    <h:commandButton value="Upload" action="#{upload.upload()}" />
    //or
    <p:commandButton value="Send" action="#{upload.trySomething()}" />

</h:form>

i've tried some solutions, always without success:

• return "pm:viewName" in the backing bean method
• RequestContext.getCurrentInstance().execute("PrimeFaces.navigate('#viewName', {reverse : 'true'})");
• FacesContext.getCurrentInstance().getExternalContext().redirect("pageName.xhtml#viewName");

the only thing i've tried with success is

<p:commandButton value="Send" action="#{upload.tryLatLon()}" oncomplete="PrimeFaces.navigate('#viewName', {reverse : 'true'})" />

but it didn't work for h:commandButton...

how can i make this stop?!

any help will be appreciated!

(i'm using PrimeFaces 3.5, PrimeFaces Mobile 0.9.4 and JSF 2.2)

Answer 1

You should update your primefaces to 5.0 for better results. i had same issue, i tried many things i could not get any solution, updating my primefaces to latest version solved the problem.

This is piece of code that is in pom.xml file where you can update your primefaces from 3.5 to 5.0 just change number in version tag.

         <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>5.0</version>
        </dependency>

Answer 2

You may need to have <pm:content> tag inside your <pm:view>.

I tried to navigate between views using <h:outputLink> as shown in below code:

  <pm:page title="Mobile">
       <pm:view id="mainView">
        <pm:header title="Music Inventory" />
         <pm:content>
           <h:form id="mainForm">                   
              <h:outputLink value="#artist?transition=slide">Artists</h:outputLink>
          </h:form>
        </pm:content>
      </pm:view>
        <pm:view id="artist">
          <pm:header title="Artists">
            <h:outputLink value="#mainView">Go to Home</h:outputLink>
          </pm:header>
          <pm:content>
             <h:outputText value="Some detail of artists" />
          </pm:content>
        </pm:view>
    </pm:page>

Some samples given in Primefaces Mobile site are not working as shown in showcase.