i'm developing a phonegap (cordova -v: 3.3.1-0.1.2) app with jquery mobile 1.4.0 (jquery 1.10.2), when running in Ms Visual Studio Premium 2013, any windows phone 8.0 emulator, the app can´t navigate from index page to home page!
The problematic link in the index.html file:
<html>
<head>
(all meta-tags, js and css imports)
</head>
<body>
<div data-role="page" id="indexPage">
<div role="main">
...
<a id="btnLogin" href="#" data-role="button">Login</a>
</div>
</div>
</body>
</html>
the associate IndexEvents.js file:
$.(document).on("touchend",'#btnLogin',function(evt){
evt.preventDefault();
console.log("---------------URL before: "+document.URL);
location.hash = "pages/home/menuHomePage.html";
console.log("---------------URL after: "+document.URL);
});
The pages/home/menuHomePage.html ("pages" folder at the same index.html level)
<html>
<body>
<div data-role="page" id="menuHomePage">
<div role="main">
...
</div>
</div>
</body>
</html>
The visual estudio console:
CordovaBrowser_LoadCompleted
---------------URL before: x-wmapp0://www/index.html
CordovaBrowser_LoadCompleted
---------------URL after: x-wmapp0://www/pages/home/menuHomePage.html
It works well in Android and IOS, but in Wp8 nothing happens! please any help?
and why is there a "x-wmapp0:" prefix ?
Related
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I am using Durandal which is available in the Hot towel template SPA.
The idea is to have a SPA application for a touch based device, and I need to implement swipe feature on some on the divs.
jquery mobile supports swipe feature, but can someone tell me how to use it.
There is a data-bind on the div, where I give the 'swipe: somefuntion' - this does not happen, whereas the same works when I use a click instead of swipe. And somefunction is defined in the view model.
I have included the jquery mobile in the scripts and also in the bundle.
Can someone help me out if this possible?
Here's a working eample: http://jsfiddle.net/Gajotres/pf3kc/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Javascript :
$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){
alert('swipeleft');
});
$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){
alert('swiperight');
});
I have an application in which i'm using jquery-mobile which has a header and it has 2 buttons "home" and "back" and when i click on back button it should terminate the page and should go back but this is not happening. Can anyone please help me how to make this possible with jquery mobile back button.
My code:
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<a id="backBtn" href="#" data-icon="arrow-l">Back</a>
<h1>SDCard Explorer</h1>
<a id="homeBtn" href="index.html" data-icon="home" data-transition="pop">Home</a>
</div>
</div>
And here are the jquery libraries which i used:
<href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<src="jquery.mobile-1.0.1.min.js" />
<src="http://code.jquery.com/jquery-1.7.1.min.js" />
Hi you can try this:
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
here the function in the JS File
function GoBack(){
history.go(-1);
}
it should work in the art
I've implemented a simple app using a listview From jQuery-mobile, it appears as hyperlink on the iphone simulator & device. It works fine on android.
PhoneGap
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
<!-- /content -->
<form>
Star button
</form</div>
<ul data-role="listview" data-inset="false" data-filter="false">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
You may need add code.jquery.com to ExternalHosts in PhoneGap.plist, if you link online jquery mobile file to your html file.
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link