The following code works fine on chrome, but once I convert it into apk through phonegap and I install it on the android phone, I see a white blank page! Any idea why this is the case?
index.html - the main page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(document).on("pagecontainerload", function(event, ui) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
});
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
page_1.html
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
And page_2.html
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
I finally found the solution, it seems so simple !
I have put the JQuery .js and JQuery Mobile .js and .css files in local, rather than call them from CDN.
It just works fine !
Related
I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with data-role="page" appropriately.
My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<header data-role="header" data-position="fixed">
<h1>Home</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
<div data-role="page" id="onoff">
<header data-role="header" data-position="fixed">
<h1>ONOFF</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
The following images show the issue. On page load, the first div with page-role="page" and id="index" is loaded and the datebox icon works as intended:
But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:
Please help me figure out what is going wrong here.
Hmm, I'm not sure why this is but using local files instead of the CDN links in the head enabled me to use the datebox plugin across pages. The files were generated using the download builder found here:
http://dev.jtsage.com/DateBox/builder/
user3889963 hit the nail on the head.
Download the source files for JQM for Datebox and then call them directly within your head.
<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">
This previous question shows there is a problem with using the plugin via the CDN Jquery Mobile DateBox plugin only working when linked directly to page
Here is it working with the files installed directly.
Unique Naming is the problem.
Within both pages you are calling the datebox item by the same name, so only the first one gets styled correctly.
Just rename the second page as datebox2 this should fix the problem. As the label for searches for the first unique ID of "datebox" and styles that one.
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox2">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
I'm currently working on an application in cordova. Since I have more pages I tried to add a menu. On the first page (index.html) there is some output, on the second file (settings.html) I want to make a Ajax-Request to a external server.
In the <head>-Tag all stylesheets and jQuery and Cordova is included. In the <body>-Tag some Ajax-calls are made.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="onLoad();">
<div data-role="controlgroup" data-corners="false">
Home
Settings
</div>
<!-- Ajax Requests -->
</body>
If I hit Settings I get to the html-page and the code will be displayed, but the code jQuery/js-code will not be executed. (I tried an alert, but it's not working)
Can you tell me what possibilities I have to include another page with working js-code?
Thanks!
If you are using jQuery Mobile , you can use Single Page Application(SPA) for multiple pages in Cordova like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" class="ui-content" >
<p>Home Page</p>
<a data-role="none" href="#setting">Setting</a>
</div>
</div>
<div data-role="page" id="setting">
<div data-role="header">
<h1>Setting</h1>
<a href="" data-rel="back" >Back</a>
</div>
<div data-role="content" class="ui-content" >
<p>Setting Page</p>
</div>
</div>
</body>
<script>
$(document).on("pagebeforeshow","#index",function(){
// You ajax call for index page
});
$(document).on("pagebeforeshow","#setting",function(){
// You ajax call for setting page
});
</script>
<html>
Demo
You need to include a script that will fire when the page is fully loaded into the DOM.
<script>
$(document).ready(function(){
-- call your$.ajax({}) here --
});
</script>
OR
<script>
(function(){
call your $.ajax({}) here --
}();
</script>
I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<!-- import markup for page1 here -->
</div>
<div data-role="page" id="page2">
<!-- import markup for page2 here -->
</div>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?
I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.
Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.
1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");
2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)
3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
I'm using jQuery Mobile and rely much on it's history state feature so I would like to use the jQuery way to redirect user to another "page". This is the latest method from their latest documentation.
p/s: The reason I prefer jQuery navigation method is because of the hashchange/history and each transition can be different instead of one global transition.
Note: jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0
and will be removed in 1.5.0. Use the pagecontainer widget's change()
method instead.
But I tried and it's not working. Anyone have experience on this can point me my error? Just hope to make my code up to date, so use their latest method.
The code as below:
Code update:
$.mobile.pagecontainer( "change", $('#page2'));
<!doctype html>
<html>
<head>
<title>Multipage example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.0.min.css" />
<script src="jqm/jquery-1.11.0.min.js"></script>
<script src="jqm/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
<script>
console.log('Next line will start redirect');
$( "#page1" ).pagecontainer( "change", $('#page2'));
</script>
</body>
</html>
The DOM may not have been built at the time your script is executed. Try something like this:
$(function() {
console.log('Next line will start redirect');
$.mobile.pagecontainer( "change", $('#page2'));
});
I am developing small mobile app which requires a header in the page. I am using html5 with below code but i did not get header and theme also not working. My code is mentioned below
Script:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="OptionsMenu.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.2.min.js"></script>
<script type="stylesheet" src="jquery.mobile-1.3.2.min.css"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
Html:
<div data-role="header" data-theme="b">
<h1>
Gps Coordinates
</h1>
</div>
did you followed the pattern of devloping a proper mobile app page?
like :
<div data-role="page" class="jqm-boilerplate">
<div data-role="header" data-position="fixed" class="jqm-header" data-tap-toggle="false" >
<!-- main header -->
</div>
<div role="main" class="ui-content jqm-content"
data-overlay-theme="a">
</div>
<div data-role="footer" data-position="fixed"
data-theme="e" style="position: fixed;">
</div>
</div>
Can you create a jsfiddle for your code???????
Are the paths for jquery-mobile css correct??