1

I have developed visualforce page using jquery mobile 1.4.5 . This visualforce page is displaying correctly on Android device. But not in Ipad or iphone. I have added this page in to mobile cards section and also checked Available for Salesforce mobile apps check box. Is there anything more need to done in order to visible this page on IPad?

Update:

<apex:page doctype="html-5.0" standardcontroller="Opportunity" showchat="false" showheader="false" sidebar="false" standardStylesheets="false">

  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <!-- page one -->

  <div data-role="page" id="pageone" >
     <div data-role="header">
        <h1>Revenue Summary Page </h1>
     </div>
     <a data-role="button" href="#pagetwo"  data-transition="fade">Edit Revenue Schedule</a> <br></br>
     <div data-role="fieldcontain">
      <label for="select-choice-11" class="select"><b>&nbsp;&nbsp;CURRENCY</b></label>
        <a data-role="button"  >USD</a>
        </div>
     <!-- <b>2015</b> <br></br> -->
     <div data-role="fieldcontain">
        <label for="select-choice-1" class="select"><b>&nbsp;&nbsp;FISCAL YEAR</b></label>
        <select name="select-choice-1" id="select-choice-1">
           <option value="standard">2014</option>
           <option value="rush">2015</option>
           <option value="express">2016</option>
           <option value="express">2017</option>
        </select>
     </div>
     <fieldset data-role="collapsible">
        <legend>Revenue Schedule</legend>
        <div class="ui-grid-d">           
        <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
              <thead>
                 <tr>
                    <th>Practice</th>
                    <th data-priority="1">Q1 FY15</th>
                    <th data-priority="2">Q2 FY15</th>
                    <th data-priority="3">Q3 FY15</th>
                    <th data-priority="4">Q4 FY15</th>
                     <th data-priority="5">Amount</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>NON Core</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>2000.00</td>
                 </tr>
                 <tr>
                    <td>Cloud</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>2000.00</td>
                 </tr>
                 <tr>
                    <td>Total</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>1000.00</td>
                    <td>2000.00</td>
                 </tr>
              </tbody>
        </table>        
        </div>
     </fieldset>

     <fieldset data-role="collapsible">
        <legend>Practice Split</legend>
         <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="Table1">
              <thead>
                 <tr>
                    <th>Practice</th>
                    <th data-priority="1">Practice Split (%)</th>
                    <th data-priority="2">Onsite Resource (#)</th>
                    <th data-priority="3">Offshore Resource (#)</th>

                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>NON Core</td>
                    <td>50</td>
                    <td>10</td>
                    <td>10</td>

                 </tr>
                 <tr>
                    <td>Cloud</td>
                    <td>50</td>
                    <td>10</td>
                    <td>10</td>

                 </tr>
                 <tr>
                    <td>Total</td>
                    <td>100</td>
                    <td>20</td>
                    <td>20</td>

                 </tr>
              </tbody>
           </table>        
     </fieldset>
     <div data-role="footer">
        <h1>Opportunity SFID : SF - 12345</h1>
        <h1>Opportunity Name : Dev - testOpp</h1>
        <h1>Amount : 1000.00</h1>
        <h1>Close Date : 2015-01-15</h1>
     </div>
  </div>    
   <!-- End of page one --       
   <!-- page two -->

  <div data-role="page" id="pagetwo">
     <div data-role="header">
        <h1>Edit Revenue Schedule</h1>
     </div>
     <br></br>
     <fieldset data-role="collapsible">
        <legend>Revenue Schedule</legend>
        <div data-role="main" class="ui-content">
           <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="Table2">
              <thead>
                 <tr>
                    <th>Fiscal Year</th>
                    <th data-priority="1">FY Q1</th>
                    <th data-priority="2">FY Q2</th>
                    <th data-priority="3">FY Q3</th>
                    <th data-priority="4">FY Q4</th>
                    <th data-priority="5">Total</th>
                    <th data-priority="6">Comments</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>2014</td>
                    <td> <input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname"  /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="2000.00" name="fname" /></td>
                    <td><input type="text" value="This is a test comment" name="fname" /></td>
                 </tr>
                 <tr>
                    <td>2015</td>
                    <td> <input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname"  /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="2000.00" name="fname" /></td>
                    <td><input type="text" value="This is a test comment" name="fname" /></td>
                 </tr>
                 <tr>
                    <td>2016</td>
                    <td> <input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname"  /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="2000.00" name="fname" /></td>
                    <td><input type="text" value="This is a test comment" name="fname" /></td>
                 </tr>
                 <tr>
                    <td>2017</td>
                    <td> <input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname"  /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="500.00" name="fname" /></td>
                    <td><input type="text" value="2000.00" name="fname" /></td>
                    <td><input type="text" value="This is a test comment" name="fname" /></td>
                 </tr>
              </tbody>
           </table>
           </div>
           <a data-role="button" href="#pagethree">Add Fiscal Year</a> <br></br>

     </fieldset>
     <fieldset data-role="collapsible">
        <legend>Practise Split</legend>
        <div data-role="main" class="ui-content">
           <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="Table3">
              <thead>
                 <tr>
                    <th>Practice</th>
                    <th data-priority="1">Practice (%)</th>
                    <th data-priority="2">Onsite Resource (#)</th>
                    <th data-priority="3">Offshore Resource (#)</th>
                    <th data-priority="4">Practice Deal Amount</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <td>NON Core</td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td>2000.00</td>
                 </tr>
                 <tr>
                    <td>Cloud</td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td><input type="text" value="50" name="fname"  /></td>
                    <td>2000.00</td>
                 </tr>
              </tbody>
           </table>
        </div>
        <a data-role="button" href="#pagefive">Add Practice</a>
     </fieldset>
      <a data-role="button" href="#pagesix">Save Changes</a>
     <a data-role="button" href="#pageone">Go to Summary Page</a>
     <div data-role="footer">
        <h1>Opportunity SFID : SF - 12345</h1>
        <h1>Opportunity Name : Dev - testOpp</h1>
        <h1>Amount : 1000.00</h1>
        <h1>Close Date : 2015-01-15</h1>
     </div>
  </div>

   <!-- End of page two -->

   <!-- page three -->

  <div data-role="page" data-dialog="true" id="pagethree">
     <div data-role="header">
        <h1>Add Fiscal Year</h1>
     </div>
     <div data-role="main" class="ui-content">
        <form method="post" >
           <label for="fname">FY Q1:</label>
           <input type="text" name="fname" id="fname1" />
           <label for="fname">FY Q2:</label>
           <input type="text" name="fname" id="fname2" />
           <label for="fname">FY Q3:</label>
           <input type="text" name="fname" id="fname3" />
           <label for="fname">FY Q4:</label>
           <input type="text" name="fname" id="fname4" />
           <label for="fname">Comment:</label>
           <input type="text" name="fname" id="fname5" />
           <input type="submit" data-inline="true" value="Add" />
        </form>
        <a data-role="button" href="#pagetwo">Close</a>
     </div>
     <div data-role="footer">
        <h1>Fiscal Year : 2018</h1>
     </div>
  </div>

   <!-- End of page three -->

   <!-- page five -->

  <div data-role="page" data-dialog="true" id="pagefive">
     <div data-role="header">
        <h1>Add Practice</h1>
     </div>
     <div data-role="main" class="ui-content">
        <form method="post" >
           <label for="select-choice-1" class="select">Practice:</label>
           <select name="select-choice-1" id="select1">
              <option value="standard">BPM</option>
              <option value="standard">Business Consulting</option>
              <option value="standard">CORE</option>
              <option value="standard">DW/BI</option>
              <option value="standard">ECM</option>
              <option value="standard">ERP</option>
              <option value="standard">FSC</option>
              <option value="standard">ISQ</option>
              <option value="standard">Mobility</option>
           </select>
           <label for="fname">Practice Percentage:</label>
           <input type="text" name="fname" id="Text1" />
           <label for="fname">Onsite Resource (#):</label>
           <input type="text" name="fname" id="Text2" />
           <label for="fname">Offshore Resource (#):</label>
           <input type="text" name="fname" id="Text3" />
           <input type="submit" data-inline="true" value="Add" />
        </form>
        <a data-role="button" href="#pagetwo">Close</a>
     </div>
     <div data-role="footer">
        <h1>Practices</h1>
     </div>
  </div>

   <!-- End of page five -->

   <!-- page six -->

   <div data-role="page" data-dialog="true" id="pagesix">

         <div data-role="header">
        <h1>Success</h1>
     </div>

     <div data-role="main" class="ui-content">

        <a data-role="button" href="#pagetwo">Close</a>
     </div>

  </div>


   <!-- End of page six -->

8
  • Make sure that Android and ipad app have latest version
    – Ashwani
    Jan 14, 2015 at 10:16
  • Yes regal. I just installed latest salesforce1 app on those devices. Jan 14, 2015 at 10:26
  • Is the page not visible at all, or is something not working correctly? If the latter, could you share your Visualforce code? Jan 14, 2015 at 10:38
  • Hi Koen, I added my code sample. Can you pls check on this. Jan 14, 2015 at 11:46
  • And this code is working perfectly when using salesforce1 browser version. Jan 14, 2015 at 11:48

1 Answer 1

1

Seems like the caanot find the issue exaclty. Can your try this example and adjust your code with this? http://bobbuzzard.blogspot.com/2012/04/mobile-apps-with-visualforce-and-jquery.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.