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.
Related
Hi In my android phonegap app,i have used jquery autocomplete feature.I need to get the keyvalue pair in autocomplete
Here is my example code:
var Person = [{"Prateek":"hello"},{"James":"android"}];
$(".searchbox").autocomplete(Person);
When i type 'j' in the textbox i need to get android instead of james in the autocomplete textbox.But i am getting error and result is not shown in textbox.And i am using autocomplete js which can be used also in asp.net
Please guide me where i am wrong.Thanks In Advance
make sure you have the following links, the ordering does matter
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-ui-1.9.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
then use autocomplete like this
$(".searchbox").autocomplete(source: Person)
jquery ui can be download here http://jqueryui.com/download/
EDIT:
you can also look at listviews at jquery mobile docs
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 have a web app for quiz and I have converted into Android app using phonegap but the problem I have is that the app takes 1-2 minutes to load which I think is because of the javascript and css being loaded. The JS and CSS files used in my quiz app are:
<link rel="stylesheet" href="css/jQueryMobilemin.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jQueryMobilemin.js"></script>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/slickQuiz.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/master.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/slickQuiz-config.js"></script>
<script src="js/slickQuiz.js"></script>
<script src="js/master.js"></script>
Is there any solution by which I can reduce the loading time of my app. I read that async JS load is better but will it help in the final android app
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
I have weird behaviour using regular HTML input type button with phonegap (android/eclipse). This is the HTML that is causing my headache:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<form>
<input type="button" value="Rest Call" onClick="restCall(); />
<button type="button" onClick="restCall();">Rest Call</button>
</form>
</body>
</html>
The result of this is two buttons with the correct label/value, "Rest Call". But, to the left of both buttons the same text is also shown. So the label/value is shown twice.
I have spent some time on this now, not finding a solution. Hope someone can help.
Cheers,
OMA
I just tried to create a PhoneGap 1.4.1 project with your HTML in it.
I couldn't reproduce the problem until I added :
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
I thought this was a problem with that specific file but then I remove
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
and it worked fine.
So I think there is a conflict between these two files.
I'm no jQuery/jQMobile expert but are you sure you need both these files (especially jQuery-1.7.1.js) ?
Why don't you change your code to :
<input type="button" value="Rest Call" name="hei" onClick="restCall();"/>
There is some conflict between the two scripts, I get the same behaviour as mentioned by TDeBailleul.
I am doing some ajax calls etc which needs jQuery-1.x.x.js. All the how-to's on using phonegap with jquery also says to do this.
I found now that I need to use a specific version of jquery mobile (jquery.mobile-1.0a4.1.min.js), which is weird. Thanks for pointing me in the right direction TDeBailleul.