I am trying to develop in an application, which is based on Phonegap and JQuery Mobile framework.
I have created a Page and Sub Page as separate HTML files.
The body part of the index.html file will look like:
<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Link1</li>
<li>Link2</li>
</ul></div></div>
The body part of page2.html file will look like:
<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Go Back</li>
</ul></div></div>
The data-theme="e" is successfully getting applied to index.html, whereas it is not getting applied to page2.html. Can someone please provide me with the reasons, for this behavior..?
I am using JQuery 1.8.3 and JQuery Mobile 1.2.1 version and I am properly calling the CSS and JS versions from local storage in both the HTML files (ex: /android_asset/www/css/jquery.mobile-1.2.1.css, ex: /android_asset/www/js/jquery-1.8.3.js/)
Also, another question lingering in my mind is, I am unable to call
the CLICK event for Link1, when I keep the body content of page2.html
in the same HTML file as index.html, as a SubPage; upon click on Link1, I am not redirected to Page2.html, even though I give href="#p2", instead of href-"page2.html#p2".
Provide data-ajax="false" in list divider of index.html. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. As per this link,
"Providing data-ajax="false" is critical because Ajax pages use the
hash (#) to track the Ajax history, while multiple internal pages use
the hash to indicate internal pages so there will be a conflicts."
Also, rename data-role="subpage" to data-role="page". This is the solution to this problem.
Related
I've built an About Us page of the app and I want to include the app version defined in the config.xml. Therefore, I want it to get version automatically rather then inserting it manually.
<script type="text/ons-template" id="about.html">
<ons-navigator title="Navigator" var="sNavigator">
<ons-page id="page-about">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white"><span id="search-text" class="trn" data-trn-key="settings">About Us</span></div>
</ons-toolbar>
<div class="about-page wrapper center">
<img src="css/images/logo2.png" width="40%" class="logo-about" alt="">
<p>App Application</p>
<strong> **+version+** </strong>
<p>Owner & Founder</p>
<strong> XXXXX</strong>
<p>Website</p>
<strong> www.domain.com</strong>
<p> </p>
<p>Developed & Designed by</p>
<strong>Developer</strong>
</div><!--End Homepage -->
</ons-page>
</ons-navigator>
</script>
Kindly advise, thank you :)
#WiTon
As with anything with Cordova/Phonegap, use a plugin and search for "app version".
My favorite is cordova-plugin-appversion. Here is a test app that works with Phonegap Build.
I attempted to parse html and some portion of that dynamically generated by javascript. Using javascriptInterface with WebView worked fine on pages that used normal javascript. However, when I attempted to do same approach on pages that were controlled by angularJS, it didn't work -- data from angularJS didn't get populated. For instance,
<span class="s1">
<span class="s2">
<em class="ng-binding">{{ someVariable }}</em>
</span>
</span>
Inside curly bracket, the variable should be resolved by angularJS and its value was visible when I inspect web app through web browser. But html I saw on while processing html in javascriptInterface was following:
<span class="s1">
<span class="s2">
<em class="ng-binding"></em>
</span>
</span>
What my guess is the page was not fully loaded even with JavascriptInterface. Is there any other way to get fully loaded page from webview?
For the first time i am trying my hand On Android Phonegap application.For the same i am designing a sample application where i have to pass some parameters from one HTML page to another .Here is the HTML for my first page ..
<div class="choice_list">
<ul data-role="listview" data-inset="true" data-filter="true">
<li> <img src="images/will.jpg"/> <h3> Will Smith </h3></li>
</ul>
</div>
Now as per my requirement i have to pass the <h3> parameter to my next HTML page i.e empdetails.html and display it there as soon as the link button gets clicked..
Here is my empdetails.html HTML..
<div id="header2">
<h2>Name: "I need to show name here"</h2>
</div>
Please help me to get this ..I am very new in this ..
Thanks ..
You can use local storage in phonegap (set on first page)
window.localStorage.setItem("key", $("h3").text());
For get the local storage use(set on second page)
var data=window.localStorage.getItem("key");
Using Local Storage is the solution, you can read more here.
I have multiple pages in my one html file.
I trying to implement the pageinit event handler on the second data-role="page".
So I declared pageinit inside it's specific data-role="page".
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.
Please help me how to go about it.
Pageinit should run only once, it was made to be just like document ready.
If you want your code to run every time page is visited then use pageshow or pagebeforeshow.
Read more about it here.
Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.
I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.
Document pageinit fires more than once on iOS (jQueryMobile)
I am using the following code in my Webview along with Jquery Mobile, This works fine in the emulator (2.2 ) and on my Nexus one but some users are complaining that when they click on a link they get an error message "Problem with File: Requested file not found". One user reported that she was using Samsung Fascinate with "2.2.1" . This seems to have started when I upgraded jquery mobile 1.0b2 , I have tried the latest 1.0rc but still have the same issue
Any Insights on what might be happening ?
In my Activity
engine.loadUrl("file:///android_asset/book2/www/newindex.html");
In the html ( I have also tried data-ajax="false" )
<link rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="jqm-home">
<div data-role="content" data-theme="e">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d" >
<li data-role="list-divider">Cognitive</li>
<li><a rel="external" href="./cogn/simon2.html">
<img src="cogn/simon.jpg" />
<h3>Simon says</h3>
<p>Memory</p>
</a></li>
From what I know about URL loading, if you are loading a local file, which is what it looks like here, that file needs to be in the same directory as the file its linking from. Because the file is local on your computer, your device and emulator should work fine. for someone else who downloads the app and tries to use the Webview functionality, that source file would need to be stored in their phone and in the appropriate directory...hope that helps.