Domino 9 Dojo mobile 1.8 not supporting in Firefox in Android

Question

I am unable to preview my sample mobile page in Firefox on Android which has been developed using notes 9. Seems Dojo 1.8 not compatible with Mozilla in Android. I did the same logic using Dojo 1.8.3. It works fine in iPad and Blackberry, but not with Mozilla in Android. its work well in native browser and chrome in Android. Even its not working with Chrome desktop browser with Android user agent

• Does anyone face the same issue?
• How can I resolve the issue?
• To reproduce the issue. Open the following URL and change user agent to Android and check.
• Same thing works well both chrome with android UA and Firefox in android Tab when upgrade Dojo version to 1.9. But i need to get work with Dojo 1.8.1 since new Domino 9 have Dojo 1.8

Click here for the demo: Dojo 1.8 demo

The JavaScript:

  dojo.require('dojox.mobile.parser')
  dojo.require('dojox.mobile.deviceTheme')
  dojo.require('dojox.mobile')
  dojo.require('dojox.mobile.FixedSplitter')
  dojo.require('dojox.mobile.ScrollableView')
  dojo.ready(
       function()
       {
         dojox.mobile.parser.parse()
        }
 )

The HTML:

<div dojoType="dojox.mobile.FixedSplitter">
    <div dojoType="dojox.mobile.Container"
         id="landscape" style="width:200px;border-right:1px solid black">
             <h1 dojoType="dojox.mobile.Heading" fixed="top"
                 class="mblHeadingLeft"></h1>
             <div id="mainMenu" dojoType="dojox.mobile.ScrollableView"
            selected="true">
            <ul dojoType="dojox.mobile.EdgeToEdgeList"
                transition="slide" stateful="true">
                <li dojoType="dojox.mobile.ListItem" moveTo="Contact"  label="Contact" selected="true"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="AccountInfo" label="Account Info"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="ContactInfo" label="Contact Info"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="Social" label="Social"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Personal Info"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Comments"></li>
                <li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Additional"></li>
            </ul>
        </div>
    </div>

    <div dojoType="dojox.mobile.Container">
        <h1 dojoType="dojox.mobile.Heading" fixed="top" label="Contact" class="mblHeadingRight">
        <span dojoType='dojox.mobile.ToolBarButton'>Navigation</span> 
            <span dojoType='dojox.mobile.ToolBarButton' style="float:left" > Back </span>
            <span dojoType='dojox.mobile.ToolBarButton'> HI </span>
            <span dojoType='dojox.mobile.ToolBarButton'>Back </span>

        </h1>
        <div id="fullFrame">



            <div id="Contact" dojoType="dojox.mobile.ScrollableView"
                selected="true">
            Contact
            </div>
            <div id="AccountInfo"
                dojoType="dojox.mobile.ScrollableView"
                selected="false">
                Account Info
            </div>
            <div id="ContactInfo"
                dojoType="dojox.mobile.ScrollableView"
                selected="false">
                 Contact Info               
            </div>
            <div id="Social" dojoType="dojox.mobile.ScrollableView"
                selected="false">
            Social
            </div>
            <div id="PersonalInfo"
                dojoType="dojox.mobile.ScrollableView"
                selected="false">
            Personal Info
            </div>
            <div id="Comments"
                dojoType="dojox.mobile.ScrollableView"
                selected="false">

            </div>
            <div id="Additional"
                dojoType="dojox.mobile.ScrollableView"
                selected="false">

            </div>


        </div>
        <div id="PopUpPanels">


        </div>
    </div>
</div>    

Answer 1

A few pointers:

• Send your code through a Validator (looks OK
• Make sure you selected HTML5 as property in the XSP properties
• Be nice and put ; at the end of your lines in JavaScript (I once spend 2h debugging since one browser was OK without and the other wasn't)
• make sure you use the XPage properties and not passthu HTML for your dojo.require