I am building a mobile app with Phonegap, using jquery.xdomainajax.js for parsing html elements from a url (another domain). The tutorial I'm following is here.
My application runs well in a web browser, but when I try it on android device was not running.
I've tried changing super.setIntegerProperty ("loadUrlTimeoutValue", 70000); from MyPhoneGapActivity.java, but still failed.
and this my index.html
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="js/jquery.xdomainajax.js"></script>
<script type="text/javascript" src="js/main-link.js"></script>
<ul id="jquery_snippets">
<li>Gathering News...</li>
</ul>
and this my main-link.js
$(document).ready(function() {
$.get('http://example.com', function(res) {
$(res.responseText).find('.art-block2 h3').each(function() {
var anchor = $(this).children('a:last');
jQuery('', {
html: jQuery('', {
href: anchor.attr('href'),
text: anchor.text()
})
}).appendTo($('#jquery_snippets'));
});
$('#jquery_snippets li:first').remove();
});
});
What's the problem? (I'm using phoneGap 1.9.0)
Did you create a domain-whiltelist?
http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html
Related
I'm very new to jQtouch. I'm following this tutorial. But because of this updated version of jQtouch I'm not being able to follow it exactly. I'm using eclipse to develop an app on android. Now, this is the code I'm trying to run
<html>
<head>
<!--<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<link type="text/css" media="screen" rel="stylesheet" href="themes/css/jqtouch.css" />
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="extensions/jqt.floaty.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Dates</li>
<li class="arrow">About</li>
</ul>
</div>
</body>
</html>
Now, I'm getting no error in eclipse. The activity is working fine. But due to some unknown reason I'm getting an empty page. Also being new to jQtouch I can switch to anything else like jquery framework directly if I can have problems with jQtouch in complex tasks.
Thanks. :)
You are not closeing the script tag
<script type="text/javascript" charset="utf-8">
var jQT = $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script><!-- Close it -->
UPDATE
Get rid of the new .
Follow the example you're making up stuff of your own.
If you insist on using constructor that is the proper way:
var jQT = new jQTouch({
option: value
});
I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
When trying to use jqplot in my Android PhoneGap application I get this error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jqplot' at file:
The graph is supposed to show after pressing a button.
I have exactly the same code running properly on a webpage in Chrome, which shows that the code is correct.
The link below has the same problem but nobody has answered it, so I thought i'd see if anyone has since found a work around.
How to plot jqplot chart inside phonegap app for Android
Includes:
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.js"></script>
jqplot code:
function makegraph() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
}
HTML:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Thanks
Found the answer:
put data-ajax="false" in the href tag to force a page reload and the jqplot script will be loaded.
Otherwise put the jqplot script and css files after the data-role="page" tag and the script will be loaded each page transition.
I've got a Phonegap (Cordova 2.0.0) app, built for Android, running with jQuery Mobile + Backbone.js. When I test it on the emulator, it works correctly (runs as in the browser, CSS and JS appear, etc).
When I sign it and install it on a non-debug device, it runs but without the CSS and JS (so basically shows an unstyled HTML document which doesn't run the JS).
The body of my app is as follows:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="libraries/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<script type="text/javascript" charset="utf-8" src="libraries/cordova-2.0.0-ios.js"></script>
<script src="libraries/jquery-1.7.2.min.js"></script>
<script src="libraries/underscore.js"></script>
<script src="libraries/backbone-min.js"></script>
<script src="libraries/backbone.localStorage-min.js"></script>
<script src="libraries/detect.js"></script>
<script type="text/javascript" src="libraries/sha1.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var jqmReady = $.Deferred();
var deviceReady = $.Deferred();
/**
* on load - manages dependency between jquery mobile and phonegap
*/
function onBodyLoad()
{
// get device
$.os = {};
$.os.android = navigator.platform.indexOf("android")>=0;
$.os.ios = navigator.platform.indexOf("iPhone")>=0 || navigator.platform.indexOf("iPad")>=0;
// listen to device ready
if ($.os.android || $.os.ios) {
document.addEventListener("deviceready", deviceReady.resolve, false);
}
else {
// must be in a browser, so immediately resolve
deviceReady.resolve();
}
}
$(document).bind("mobileinit", jqmReady.resolve);
$(document).bind("mobileinit", function() { console.log('mobileinit'); });
$(document).bind('pageinit', function() { console.log('pageinit'); });
// when jquery mobile and device ready, then fire
$.when(jqmReady, deviceReady).then(function() {
console.log('Ready');
// disable push state: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
$.mobile.pushStateEnabled = false;
App.init();
});
onBodyLoad();
</script>
</head>
<body onload="" data-lat="" data-lng="">
Has anyone come across this before? I was wondering if it's something to do with the relative paths (rather than absolute?) or how I package it together in Eclipse. Also, on an iPhone it works fine.
Thanks.
I am developing an android application. In that, I am trying to get the image in the javascript, but its not loading. Can someone help me to get the image in the javascript in the phone gap android app...
Code:
<img src="img/nextIcon.png" /></span>'
why the end span tag ?
Basically your file should look something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Something</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad()">
<img src="img/nextIcon.png" />
</body>
</html>
And then of course you should have included the image in a folder called img which is in you www folder