I am using jQueryMobile and PhoneGap to develop a cross platform mobile app. I am binding to the first page that is loaded in the app (the 'home' page) but the pageinit event does not fire. Here's my custom javascript:
$('#home').live('pageinit', function()
{
alert('firing pageinit');
}
Here's my index.html file with the page definition:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
Refresh
<h1>MyListingsApp</h1>
Add
</div>
<div data-role="content">
<ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings...">
<li id="hit_to_begin"></li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.ui.map.services.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
The event does not fire and all I get is the loaded homepage. According to the jQueryMobile docs this is proper binding to handle customization on page initialization.
Look at this example: http://jsfiddle.net/Gajotres/BGkaq/, I made you 2 examples, you can find them at the bottom of the page.
Event binding example 1:
// in (url^=home) home is a page id
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
Event binding example 2:
$('#home').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
Related
I'm a veteran programmer but am new to the whole mobile phone app programming and have just delved into PhoneGap. I have a pretty simple page I've put together using JQuery Mobile, PhoneGap, and Jquery but I've run into a snag. When I click on the href to load the "news" page, the .ajax() method doesn't seem to execute. I've got it in the traditional document ready wrapper and removing that doesn't seem to help the issue like I thought. So maybe I'm all screwed up but I cannot figure out why it wont fire UNLESS you refresh the page, then it works fine. Might be an newbie question but I feel like I am first year programmer.
Update: To be clear about what my issue is, I am testing in Firefox and have the PhoneGap desktop app serving the code. When I click on the News button the page loads but the elements that are added by Ajax don't appear. If I hit refresh on the browser, the page reloads and the elements appear. They never show up on the mobile phone unless I make a change to the code which forces the phonegap desktop app to cause the page to reload on the phone. So it's always the reload which causes it to happen.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:"" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-position="fixed">
<h1>My App</h1>
</div>
<div role="main" class="ui-content">
News
Gigs
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Here is news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var output = $('#news');
$.ajax({
url: 'http://xxxxxx.com/api/news/getnews',
dataType: 'jsonp',
cache : false,
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
+ '<p>'+item.body+'<br><small>'
+ item.date+'</small></p></div>';
output.append(story).enhanceWithin();
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
</script>
<title>News</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div role="main" class="ui-content" id="news">
<div data-role="collapsible">
<h1>Hi</h1>
<p>Am I collapsible?</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Can someone tell me why the ajax wont execute unless I refresh the page first? Thanks in advance.
I finally figured it out. The news.html page shouldn't have had the html, head section, or body tags.... just simply the contents of the body. After getting rid of that jQuery mobile loaded the new page into the "template" that was already there.
I did go ahead and replace the jquery's document onready event with:
document.addEventListener("deviceready", function(){
so now my new news.html page looks like this:
<div id="home" data-role="page">
<script type="text/javascript">
document.addEventListener("deviceready", function(){
var output = $('#news');
$.ajax({
url: 'http://xxxxxx.com/api/news/getnews',
dataType: 'jsonp',
cache : false,
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
+ '<p>'+item.body+'<br><small>'
+ item.date+'</small></p></div>';
output.append(story).enhanceWithin();
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
</script>
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div role="main" class="ui-content" id="news">
<div data-role="collapsible">
<h1>Hi</h1>
<p>Am I collapsible?</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
That's the content of the entire page. I will say that after I fixed this I began getting errors with my Content-Security-Policy and that's a whole other question but it seems to be working now and loading the ajax like it is supposed to.
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
I'm a newbie. I want to save a value inputted by the user in the preferences manager, and have it automatically populate a field(if it has been filled by the user). I get a "ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:53" in my Android logcat. Also my app crashes. What am I doing wrong?
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" type="text/css" href="css/index.css" />-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
<title>Hello World</title>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
//once the device ready event fires up, you can safely do your thing
function onDeviceReady(){
//document.getElementById("welcomeMsg").innerHTML += "Phonegap is ready! version=";
}
$(function(){
$('#savebutton').click(function(){
//this is where the user manually keys in values, do error checking here
window.localStorage.setItem("user_lat", $('#user_lat').val());
});
//called when the page is being shown
$('#newpage').live('pageshow', function(){
var userLat = window.localStorage.getItem("user_lat");
if (userLat.length > 0){
$('#user_lat').val(userLat);
}
});
});
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
Hola Phonegap & Jquery mobile!
Go to new page
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<!--2nd page-->
<div id="newpage" data-role="page">
<div data-role="header">
<h1>Manually specify your GPS coordinates</h1>
</div>
<div data-role="content">
<label for= "user_lat">Latitude:</label>
<input type="text" name="user_lat" id="user_lat" value=""/>
<a id ="savebutton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</body>
If '$' isn't defined I don't think that jQuery is being loaded correctly..
Try:
if ( $.mobile ) {
// loaded
} else {
// not loaded
}
to check if jQuery mobile is loaded, or try this for normal jQuery:
if (!jQuery) {
alert("jQuery is not loaded");
}
You need to include jQuery in your page in order to use $ (jQuery) which you did not. You can add the script tag and give the url of jquery in src attribute. Add this tag in head tag so that it is added before it is required.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
in my hybrid app, i'm trying to change page in a multipage file using jquery mobile function changePage.
when i press the button it hides current pages and shows blank page. same if i'm hidding/showing divs using hide/show jquery functions.
it works perfect in pc web browsers. but in mobile app.
how can i change/show second page?
here is my code:
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="js/jqtouch/jqtouch.js" type="application/x-javascript"
charset="utf-8"></script>
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.theme-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.structure-1.1.0.min.css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery.mobile-1.1.1.js"></script>
</head>
<body>
<div id="TaskList" data-role="page">
<div data-role="header">
<h1>Dienos užduotys</h1>
</div>
<script type="text/javascript">
function showTaskDetails(id) {
$.mobile.changePage("#taskDetails", {
transition : "slideup"
});
}
</script>
<div data-role="content">
<div id="task_list" data-role="controlgroup">
<a data-role="button" onclick="showTaskDetails(1)" href="#">Name</a>
</div>
</div>
</div>
<div id="TaskDetails" data-role="page">
<div data-role="header">
<a href="#TaskList" data-icon="arrow-l" data-iconpos="left"
data-rel="back">Atgal</a>
<h1>Dienos užduotys</h1>
</div>
<div data-role="content">
<input type="text" value="" id="task_id" />
</div>
<div data-role="footer"></div>
</div>
</body>
UPDATE: seems like the problem appeared because of changePage function that is in login file.
If you have multiple pages of documents, only need to do this:
$.mobile.changePage("#taskDetails", {transition : "slideup"});
$.mobile.changePage("file1.html", {transition : "slideup"});
$.mobile.changePage("file2.html", {transition : "slideup"});
......
I am using JQM 1.1.0 and Cordova 1.5.0.
I have code like this
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
$("#page1").live("pageinit", function(e) {
console.log("pageinit1");
}
$("#page2").live("pageinit", function(e) {
console.log("pageinit2");
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content"></div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content"></div>
</div>
</body>
This code is working fine for Android. but in iOS,as soon as the page loads then the pageinit event of page1 doesnt get fired and later on if i changepage to page2 then everything is fine.. Why is this happening?
am not so sure about that but as i know live function has changed in JQ1.7.x and now you will have to use the on() function which has small changes to the way you code your code ..
I just need to write my javaScript functions after data-role="page" to make it working...