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>
Related
I have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.
Any idea?
-----A.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="a">
<div data-role="main" class="ui-content">
<a href='b.html'>Go to b</a>
</div>
</div>
<script>
console.log("a 123");
</script>
</body>
</html>
-----B.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="b">
<div data-role="main" class="ui-content">
<a href='a.html'>Go to a</a>
</div>
</div>
<script>
console.log("b 123");
</script>
</body>
</html>
Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.
From the docs:
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/
That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.
I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something.
function goToCards() {
console.log('got to goToCards');
$(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BibHub Mobile</title>
</head>
<body>
<div class="app" data-role="page" id="loginPage">
<div data-role="header">
<h1>Biphub</h1>
</div>
<div data-role="content">
go to cards
</div>
</div>
<div class="app" data-role="page" id="cardsPage">
<div data-role="header">
<h1>Biphub</h1>
<h2>Your UID is <span id="uidSpan"></span></h2>
</div>
<div data-role="content">
<p>Your card stack is currently empty. Way to go!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?
The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?
If not, you need to use $.mobile.changePage : API DOC
I have an initial init page in my application that acts as an entry point and loads my login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- initialse and load the application -->
<div data-role="page" id="init">
<script type="text/javascript">
$('#init').live( 'pageinit', function() {
window.location.href="views/login.html";
});
</script>
</div>
</body>
</html>
When my login page loads there is a button which loads a dialog. This button initially doesn't work and only loads the dialog when the page is manually refreshed. Why does this happen and what can I do to enable the button/dialog immediately upon page load.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- login page -->
<div data-role="page" id="login">
<!-- css -->
<link rel="stylesheet" href="../css/global.css" />
<link rel="stylesheet" href="../css/login.css" />
<!-- page markup -->
<div data-role="header">
Settings
</div>
</div>
<!-- end of page -->
<!-- settings dialog page -->
<div data-role="dialog" id="settings_dialog">
<!-- page markup -->
<div data-role="header" style="text-align: left;">
</div>
<div data-role="content">
</div>
</div>
<!-- end of page -->
</body>
</html>
Not sure if you've fixed this but it seems to be something to do with the DOM cache & AJAX.
I'm not sure how you'd do it, but try setting the ajax: false when you do the window reload. Alternatively you could redirect via server side (I'd recommend this as it'll still work if the user has JS turned off.
Why I figured this out was because I had a page with a list on it, the list items sent me to a new page which has a jump link on it (#settings_dialog). Setting the data-ajax="false" on each list item somehow 'refreshed' the DOM and forced the second page to load 'fresh' and voila - my dialog works 100% now.
So, in short, turn off the AJAX feature or (better) redirect from serverside & be happy!
I'm building an app in html/css/javascript and using phonegap to build.
So, I first wanted to have to simple page to page navigation. I tryed this:
index:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.
I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?
My question is: How do I get a good page transition (fast and with effects)?
You should remove rel="external" from your <a> link.
The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.
Try your code after removing it.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
<a data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Let me know about your results.
Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.
Hey still new to JS/CSS/HTML well basicly webdevelopment.
I have a page, for which I'm loading most of the stuff dynamicly. If i goto it by window.location="mapmode.jsp" Then it doesn't load properly but if I do an <a href> tag it loads fine.
Also if I do pagerefresh on the fine page, it loads in badly again.
Could be a jquerymobile thing maybe, but I'm just not sure..
The way I initialize the dynamic stuff might also be relevant so here it is:
$(document).on("pageinit", "#mapmode", function(event) {
initPageHeader();
});
Any help would be appreciated.
edit: mapmode.jsp:
<%--
Document : mapMode
Created on : Jul 12, 2012, 10:36:22 AM
Author : ame
--%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>TEEEST</p>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent" name="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/LocalAction.js"></script>
<script type="text/javascript" src="js/firstPage.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/PageHeader.js"></script>
<script type="text/javascript" src="js/Mapmode.js"></script>
</body>
</html>
jQuery Mobile sidesteps your browsers linking and history. It automatically wires this up for links (<a href>). But for JavaScript you need to use their changePage method.
For example:
$.mobile.changePage('pagename.jsp');
See the linked documentation for more information and options when using changePage.