Databases
StackOverflow2013
Postsdbo
POPhoneGap jQuery mobile multiple html files css not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPhoneGap jQuery mobile multiple html files css not working
    text
    copied!<p>I have implemented a <strong>Phone Gap application using jQuery Mobile and java script</strong> for iPhone and android. </p> <p><em>My app is almost completed.</em></p> <p>Till now I used <strong>single index.html file for all the pages</strong>.</p> <p>Now I need to use <strong><code>different html files for different pages.</code></strong></p> <p>So I have created <strong>multiple external html files</strong> for different pages, linked the references and added them in to www folder.</p> <p>in that the i have a list view its css not visable</p> <p><img src="https://i.stack.imgur.com/zrN1V.png" alt="enter image description here"></p> <p><strong>Main Page:-</strong> See <strong><code>page2</code></strong> and <strong><code>page3</code></strong> ref in <strong>index.html</strong> file </p> <pre><code>&lt;div data-role="content"&gt; &lt;ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view"&gt; &lt;li data-role='list-divider' &gt;&lt;big&gt;Lis view&lt;/big&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='#page1' id='Page1' data-panel='main'&gt;Page1 Information&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='page2.html' rel="external" id='pagetwoid' data-panel='main'&gt;Go to Page 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href='page3.html' rel="external" id='pagethreeid' data-panel='main'&gt;Go to Page 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>Page2:-</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Multiple htmls&lt;/title&gt; &lt;meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt; &lt;!-- &lt;link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /&gt; &lt;link rel="stylesheet" href="inc/jquery.mobile.splitview.css" /&gt; &lt;link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" /&gt; &lt;link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /&gt; --&gt; &lt;link rel="stylesheet" href="inc/jquery.alerts.css" /&gt; &lt;link rel="stylesheet" href="inc/jquery.mobile.datebox.css" /&gt; &lt;script charset="utf-8" src="cordova-1.9.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/jquery.mobile.splitview.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/jquery.alerts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/iscroll-wrapper.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="inc/iscroll-lite.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; alert('js Loadfed'); &lt;/script&gt; &lt;style&gt; alert(); alert('css loaded'); &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!--============= Page2 ===============---&gt; &lt;div data-role="page" id="siteContacts" data-theme="e" &gt; &lt;div data-role="header"&gt; &lt;h1&gt;Page 2 &lt;/h1&gt; &lt;a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" &gt;Edit&lt;/a&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a"&gt; &lt;li data-role="list-divider"&gt; &lt;!--list Header ---&gt; &lt;div class="ui-grid-c"&gt; &lt;!--Section Headers Grid---&gt; &lt;div class="ui-block-a" &gt;&lt;big&gt; aaaa&lt;/big&gt; &lt;/div&gt; &lt;div class="ui-block-b" &gt;&lt;big&gt; bbbb&lt;/big&gt; &lt;/div&gt; &lt;div class="ui-block-c" &gt;&lt;big&gt; ccc&lt;/big&gt; &lt;/div&gt; &lt;div class="ui-block-d" &gt;&lt;big&gt; e-sss&lt;/big&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload