voyent
mobi.layoutMenu is undefined after page refresh  XML
Forum Index -> ICEmobile General
Author Message
kbates

Joined: 13/Sep/2012 15:11:54
Messages: 18
Offline


I have a fairly basic ICEmobile application with a contentStack. Each contentPane has a contentNavBar on it with one contentMenuItem to return to the home contentPane. If I am on the home contentPane and refresh the browser, everything works fine. However, if I am on a contentPane other than the home pane, a refresh of the browser prevents the contentNavBar contentMenuItem from returning to the home panel. The error that is thrown in the javascript is "TypeError: mobi.layoutMenu is undefined".

I have tried to set the org.icefaces.replayNavigationOnReload context parameter to true in the web.xml, to no avail, although this probably has nothing to do with this type of "navigation".

I am fairly certain that this is the bug MOBI-668, except that the JIRA mentions having a contentNavBar is all that is necessary. Having the contentNavBar does not seem to work for me. Also, my circumstances may be a little different as it is only a problem if the user refreshes the page.

So the question becomes is there a work around? The issue breaks the page completely, rendering the mobile aspect of my page useless. The only way to recover from this is to either wait for the session to expire or restart the server, neither of which is desirable in a production environment.

I am using ICEFaces 3.3.0 and icefaces-mobi 1.3.0 running on Tomcat 7.


Code:
<mobi:pagePanel>
                 <f:facet name="header">
                     <ice:outputText value="Mobile App"/>
                     
                 </f:facet>
                 <f:facet name="body">
                    
                     <mobi:contentStack id="stack1" currentId="#{mobiIndexCtrlr.pageId}"
                                        contentMenuId="mnu">
                         <mobi:contentPane id="mnuPanel" menuOrHome="true">
                             <h:form id="mainmnuform">
                                 <mobi:contentStackMenu id="mnu"  contentStackId="stack1"  >
 
                                     <mobi:contentMenuItem label="Instant Alerts" value="instantAlertPane" />
                                     <mobi:contentMenuItem label="Build Alert" value="buildAlertPane"/>
                                     <mobi:contentMenuItem label="Active Alerts" value="activeAlertsPane"/>
                                 </mobi:contentStackMenu>
                             </h:form>
                         </mobi:contentPane>
                         <mobi:contentPane id="instantAlertPane">
                             <mobi:contentNavBar>
                                 <mobi:contentMenuItem label="Main Menu" value="mnuPanel" />
                                 <h3>Instant Alerts</h3>
                             </mobi:contentNavBar>
 
                             <ui:include src="/mobil/alert/alertLinks.xhtml"/>
 
                         </mobi:contentPane>
                         <mobi:contentPane id="buildAlertPane">
                             <mobi:contentNavBar>
                                 <mobi:contentMenuItem label="Main Menu" value="mnuPanel" />
                                 <h3>Build Alert</h3>
                             </mobi:contentNavBar>
 
                             <ui:include src="/mobil/alert/buildAlert.xhtml"/>
 
                         </mobi:contentPane>
                         <mobi:contentPane id="activeAlertsPane">
                             <mobi:contentNavBar>
                                 <mobi:contentMenuItem label="Main Menu" value="mnuPanel" />
                                 <h3>Active Alerts</h3>
                             </mobi:contentNavBar>
 
                             <ui:include src="/mobil/alert/activeAlerts.xhtml"/>
 
                         </mobi:contentPane>
 
                     </mobi:contentStack>
                  </f:facet>
                 
                 <f:facet name="footer">
                     <h:form id="footerForm">
                         <mobi:commandButton value="Logout" action="#{loginBean.doLogout}" />
                     </h:form>
                 </f:facet>
             </mobi:pagePanel>
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


Please inspect page to see if layoutmenu.js is present. if not, then
perhaps try placing a link for now of layoutmenu.js in the head of the page.
THe client api (js) in 1.4 will be actually loaded with the contentStack rather than the menu, so hopefully will solve this. Until then we should definitely be able to find a work around. I put a comment on MOBI-668, if you want to add feedback there so it is not lost?
There are a few examples of these components in mobitest, so if you could try it and modify it for your use, that might also help isolate why this is happening.
kbates

Joined: 13/Sep/2012 15:11:54
Messages: 18
Offline


I added layoutmenu.js as a script in the header of the page. That fixed the problem and navigation is now not lost when the user refreshes the page. This will probably be fixed in the future.

I would have added this comment to the JIRA, but I do not have that authority at this time.
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


That's OK... glad to know that was what the problem was. Hopefully that helps you out until we get 1.4 out.
demurie

Joined: 01/Oct/2008 00:00:00
Messages: 5
Offline


Could you please post the syntax used to add layoutMenu.js to the head?
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


That JavaScript file is automatically loaded as long as you include a <mobi:contentMenuItem> or <mobi:contentStackMenu>. So it might be easier just to include an empty contentStackMenu in the contentStack like so:

Code:
 <mobi:contentStack..>
     ..
     <mobi:contentPane id="menu">
          <mobi:contentStackMenu></mobi:contentStackMenu>
     </mobi:contentPane>
 </mobi:contentStack>
 


This issue has been fixed in the ICEmobile trunk and will be available in the next release:

http://jira.icesoft.org/browse/MOBI-668

Thanks,
Philip

.
demurie

Joined: 01/Oct/2008 00:00:00
Messages: 5
Offline


Thanks!

My page already contains a contentStackMenu, but I still get the error sometimes after hiding and redisplaying the menu:

<c:if test="#{!empty sessionBean.user}">

<c:set target="#{iceMobileBean}" property="initialMenuPane"
value="mainMenuPane"/>

<h:form>
<mobi:contentStack id="menuStack" currentId="#{iceMobileBean.currentMenuPane}"
contentMenuId="mainMenu">
<mobi:contentPane id="mainMenuPane" menuOrHome="true">
<mobi:contentStackMenu id="mainMenu"
contentStackId="menuStack"
selectedPane="#{iceMobileBean.currentMenuPane}">
<c:forEach items="#{sessionBean.menuEntries}" var="submenu">
<mobi:contentMenuItem label="#{submenu.label}"
value="#{submenu.facesId}"/>
</c:forEach>
</mobi:contentStackMenu>
</mobi:contentPane>
<c:forEach items="#{sessionBean.menuEntries}" var="submenu">
<mobi:contentPane id="#{submenu.facesId}">
<mobi:contentNavBar>
<mobi:contentMenuItem label="Main" value="mainMenuPane"/>
<h4>#{submenu.label}</h4>
</mobi:contentNavBar>
<mobi:outputList inset="false">
<ui:repeat value="#{submenu.children}"
var="child">
<mobi:outputListItem group="#{child.group}" >
<h:commandLink rendered="#{!child.group}"
styleClass="ui-link-inherit"
value="#{child.label}"
action="#{sessionBean.dispatchFromActionParameter}"
>
<f:setPropertyActionListener
target="#{sessionBean.actionParameter}"
value="#{child}"/>
</h:commandLink>
<h:outputLabel rendered="#{child.group}"
value="#{child.label}"/>
</mobi:outputListItem>
<ui:repeat value="#{child.children}"
var="grandchild">
<mobi:outputListItem group="#{grandchild.group}" >
<h:commandLink
styleClass="ui-link-inherit"
value="#{grandchild.label}"
action="#{sessionBean.dispatchFromActionParameter}"
>
<f:setPropertyActionListener
target="#{sessionBean.actionParameter}"
value="#{grandchild}"/>
</h:commandLink>
</mobi:outputListItem>
</ui:repeat>
</ui:repeat>
</mobi:outputList>
</mobi:contentPane>
</c:forEach>

</mobi:contentStack>
</h:form>
</c:if>
kbates

Joined: 13/Sep/2012 15:11:54
Messages: 18
Offline


The fix that worked for me was adding layoutmenu.js to my project and including it in my header. I don't remember exactly, but I believe I downloaded the source to find layoutmenu.js. This is not ideal as I will have to change this when the new release comes out, but it worked.

Code:
<h:head>
         <script src="./js/layoutmenu.js" type="text/javascript"/>
 </h:head>
demurie

Joined: 01/Oct/2008 00:00:00
Messages: 5
Offline


Thanks!
 
Forum Index -> ICEmobile General
Go to:   
Powered by JForum 2.1.7ice © JForum Team