PhoneGap jQuery mobile multiple html files css not working

Question

I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.

My app is almost completed.

Till now I used single index.html file for all the pages.

Now I need to use different html files for different pages.

So I have created multiple external html files for different pages, linked the references and added them in to www folder.

in that the i have a list view its css not visable

enter image description here

Main Page:- See page2 and page3 ref in index.html file

<div data-role="content">
    <ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
        <li data-role='list-divider' ><big>Lis view</big></li>
        <li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
        <li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
        <li><a href='page3.html' rel="external"  id='pagethreeid' data-panel='main'>Go to Page 3</a></li>                             </ul>
</div>

Page2:-

<!DOCTYPE html>
<html>
     <head>
          <title>Multiple htmls</title>

          <meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

          <!--
          <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
          <link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
          <link rel="stylesheet"  href="inc/jquery.mobile.grids.collapsible.css" />
          <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
          -->
          <link rel="stylesheet" href="inc/jquery.alerts.css" />
          <link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
          <script charset="utf-8" src="cordova-1.9.0.js"></script>
          <script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
          <script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>


          <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
          <script type="text/javascript" src="inc/jquery.alerts.js"></script>
          <script type="text/javascript" src="inc/iscroll-wrapper.js"></script>

          <script type="text/javascript" src="inc/iscroll-lite.js"></script>

          <script type="text/javascript">
                           alert('js Loadfed');
               </script>

          <style>
               alert();
               alert('css loaded');

               </style>

     </head>

     <body>


          <!--============= Page2 ===============--->
          <div data-role="page" id="siteContacts" data-theme="e"  >
               <div data-role="header">
                    <h1>Page 2 </h1>
                    <a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a> 
               </div>

                    <div data-role="content">
                         <ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">

                              <li data-role="list-divider"> <!--list Header --->
                                   <div class="ui-grid-c"> <!--Section Headers Grid--->
                                        <div class="ui-block-a" ><big> aaaa</big> </div>
                                        <div class="ui-block-b" ><big> bbbb</big> </div>
                                        <div class="ui-block-c" ><big> ccc</big> </div>
                                        <div class="ui-block-d" ><big> e-sss</big> </div>
                                   </div>

                              </li>
                              </ul>
                         </div>




     </body>
     </html>

user1452076 · Accepted Answer · 2012-07-25 16:02:17Z

1

Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.

Are you loading them someplace else that it not apparent from the code you posted?

answered Jul 25, 2012 at 16:02

user1452076

12712 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

theHopper · Accepted Answer · 2013-06-27 20:53:13Z

PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.

The solution you are looking for, I believe, is this line:

<access origin="http://code.jquery.com" subdomains="true" />

You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:

<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!

Collectives™ on Stack Overflow

PhoneGap jQuery mobile multiple html files css not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related