I am trying to draw a simple bar graph using jqplot in Android phonegap app but i am not getting anything, no error no graph.
I am new to jqplot and phonegap so please help me out.
my html file is:
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.jqplot.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script src="jquery.mobile/jquery.jqplot.min.js"></script>
<script src="jquery.mobile/jqplot.barRenderer.min.js"></script>
<script src="jquery.mobile/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>
<style type="text/css">
.myChart {
width: 300px;
height: 200px;
}
</style>
</head>
<body onload="init();">
<div data-role="page" id="page-home" class="type-interior" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Bar Graph Demo</h1>
</div>
<div data-role="content" data-theme="c">
<div id="barChart" class="myChart"></div>
</div>
</div>
Index.js:
function init() {
//alert("hi");
}
$('#page-home').live('pageinit', function(event){
$.jqplot('barChart', [[[5,1], [3,3], [1,5]]], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
},
pointLabels: {show: true, formatString: '%d'}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
}).replot({clear: true, resetAxes:true});
});
document.addEventListener("deviceready", onDeviceReady, false);
You should put your code in
function onDeviceReady() {
}
Also make sure that you have a div or any other html element with id 'barChart'.
Related
I'm trying to show ads in the app built with jquery mobile using Cordova. I'm using the Cordova-Admob-plus plugin to show ads. The plugin works fine when I use the onsen UI to build apps. But when I use Jquery Mobile the ads do not show.
I don't know why the ads do not work when I use the Jquery Mobile framework to build the app. I think it has something to do with the javascript function which is not working in jquery Mobile. But I am not able to find out the actual problem.
index.html file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>App</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/cont.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css">
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.min.css" />
<script src="js/onsenui.min.js"></script>
<body>
<div data-role="page" id="homeIndex" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>SCHOLARSHIPS PAKISTAN</h1>
</div>
<div class="app">
<div id="deviceready" class="blink">
</div>
</div>
<div data-role="main" data-role="content" class="ui-content" data-theme="a">
<div class="app">
<div id="deviceready" class="blink">
</div>
</div>
All Scholarships
Merit Based Scholarships
Need Based Scholarships
HEC Local Scholarships
HEC Foreign Scholarships
PEEF Scholarships
University Scholarships
Undergraduate Scholarships
Post Gardauate Scholarships
Engineering and IT Scholarships
Medical Scholarships
Business and Management Scholarships
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1 id="title">Error</h1>
</div>
<div data-role="content" id="content">
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/pinch-zoom.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
index.js file to show ads
'use strict'
const app = {
initialize() {
document.addEventListener(
'deviceready',
this.onDeviceReady.bind(this),
false,
)
},
onDeviceReady() {
this.receivedEvent('deviceready')
this.showAds()
this.checkIsLoaded()
this.showAdsOld()
},
checkIsLoaded() {
return admob.interstitial.isLoaded().then(result => {
console.log(result)
return result
})
},
showAds() {
const banner = new admob.BannerAd({
adUnitId: 'ca-app-pub-5517499679401400/9842406242',
})
banner.show({ position: 'top' })
},
showAdsOld() {
admob.interstitial
.load({ id: 'ca-app-pub-5517499679401400/3866534140' })
.then(() => admob.interstitial.show())
.catch(console.log)
},
receivedEvent(id) {
const parentElement = document.getElementById(id)
console.log(`Received Event: ${id}`)
},
}
app.initialize()
I think you should try the cordova Admob-pro plugin. It is easy and faster to use.
Hi I am developing a native android application in phone-gap ,in that application I want to upload a image file through chose file button when I click the button I want to open the device gallery but the gallery window is not opening.I can open the gallery windows when I load through browser in device but cant make it natively for android,so please help me find solution for this.
Will the phone gap scripting file changes for various platform or it needs any plugin files to be added for various platforms in phone gap or I need to add any cordova.js files to root files(like WWW).
I have doubt that any kind of version compatibility issues in phone gap or device so please help me.
for further details i will add my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/plugins/jqtransform/jqtransform.css" />
<title> Mobile</title>
<script src="js/jquery/jquery162min.js" type="text/javascript"></script>
<script src="js/jquery/plugins/accordion/jqueryui1814custommin.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/plugins/jqtransform/jqtransform.js" ></script>
<script src="js/mgeneral.js" type="text/javascript"></script>
<script src="../js/pl/plupload.js" type="text/javascript"></script>
<script src="../js/pl/plupload.html5.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
/*Set skin for select, options and checkbox*/
$('.skinnable').jqTransform({ imgPath: 'img/' });
$('#apply-to-selection-2').click(function (e) {
e.preventDefault();
Logout();
if (RTNCODE)
window.location = "index.html";
});
/*table row select*/
$("table.grid thead tr th.col-row-select input").click(function () {
if (!$(this).is(":checked")) {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", true);
$(this).change();
});
}
else {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", false);
$(this).change();
});
}
});
/*END table row select*/
/*Create accordion*/
$(".accordion").accordion({
header: ".accordion-tab",
collapsible: true,
active: 0,
autoHeight: false
});
});
</script>
<script type="text/javascript">
$(function () { //image loader
var uploaderimage = new plupload.Uploader({
// General settings
runtimes: 'html5',
container: 'imagecontainer',
browse_button: 'pickfiles',
url: '/imageupload.ashx?mobile=true',
multi_selection: false,
max_file_size: '10mb',
//chunk_size: '1mb',
multipart: true,
urlstream_upload: true,
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
});
uploaderimage.init();
uploaderimage.bind('FilesAdded', function (up, files) {
// showmodalmask();
uploaderimage.start();
$('.imgpre').show();
$('.imgcpl').hide();
});
uploaderimage.bind('FileUploaded', function (up, file) {
if (uploaderimage.total.uploaded == uploaderimage.files.length) {
// $('.btnrefresh').click();
$('.imgcpl').show();
$('.imgpre').hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="frame">
<div class="frame-border-top"></div>
<div class="frame-border-middle">
<div class="cute" style="">
<h1 class="header" style="color:transparent; width:270px; height:20px;">
</h1></div>
<!-- MENU START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<div id="tabs-2" style="background-color:Black; border:1px solid #363636;">
<div style="margin-left:-15px; margin-top:-6px;">
<div class="form-row padding-lr-5" style="text-align:center;">
<div id="imagecontainer" >
<div id="filelist"></div>
<br />
<a id="pickfiles" href="#" style="background-color: #447cd1; color: white; border: 2px solid #113b7c; border-radius: 12px; padding: 6px 10px; font-size: 12pt; text-decoration: none">Select file</a>
</div>
<br />
<div class="holderloderp imgpre" style="display:none"><img src="../images/pnl-preloader2.gif" width="25" height="25" alt="" class="pnl-preloader2" /></div>
<div class="imgcpl" style="color: green; display: none" >Complete</div>
</div>
<div class="clear" style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to use the FileTransfer object of the phonegap API which will do the upload to your server using any server side script file handler.
Look at this link
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 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 tried following code and I am getting error Connection to server was unsuccessful to "www/assets/index.html"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<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>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
the interesting fact is it was working fine earlier. But now I am getting this error. Infact I have even tried this approach[super.setIntegerProperty("loadUrlTimeoutValue", 60000); ], but not solved. It removes the error, but the data from remote server is not loading..Please help me..
Thanks.
Sorry for the late reply..here is the code..the only difference is i have included all the css and js files into my project than referring from CDN
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link href="styles/jquery.mobile-1.0.min.css" />
<script src="scripts/jquery-1.6.4.min.js"></script>
<script src="scripts/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
Thanks.