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
Related
New to phonegap and ran into a problem on my first try. This works online, fails to start geolocation (or something) on the emulator, and gives me "Uncaught ReferenceError: google is not defined:41" error when uploading to my device.
The only thing I can think of is it is not loading the map js file, or some order is not being built correctly. All examples and projects i have seen conveniently skip actual device testing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>asd</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY0&sensor=true">
</script>
<style>
html{height:100%;}
body{height:100%; margin:0; padding:0;}
#map-canvas{height:50%;}
#content {
padding:0;
position:absolute !important;
top:40px !important;
right:0;
bottom:40px !important;
left:0 !important;
z-index:10;
}
#bottom {margin-top:65%;}
</style>
<script type="text/javascript">
$(document).on('pageinit', '#page1', function(e,data) { getPos(); });
var lat;
var lng;
function getPos(){ navigator.geolocation.getCurrentPosition(onSuccess, onError); }
function initializeMap() {
console.log('init: '+lat+':'+lng);
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom:8,
center:myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
function onSuccess(position){
lat = position.coords.latitude;
lng = position.coords.longitude;
console.log(lat+":"+lng);
initializeMap();
}
function onError(error){
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<h3>MapIt</h3>
<a data-rel="back">Back</a>
</div>
<div data-role="content" id="content">
<div id="map-canvas"></div>
</div>
<div id="bottom">
AddMarkers
<div data-controltype="textinput">
<input name="" id="textinput2" placeholder="City and state" value="" type="text">
</div>
<input type="submit" value="Submit">
<input type="submit" value="My Location">
</div>
</div>
</body>
</html>
I have tried every solution Ive seen on here and the web. Surprisingly there is only a page and a half of google results with this title and phonegap.
On my phone is does display everything but the map.
It is this line that it fails
var myLatlng = new google.maps.LatLng(lat,lng);
Thanks in advance.
****UPDATE SOLVED****
It was the white list
There is two of them that need to be changed to this
in assets/www/config.xml
in res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
It was the white list There is two of them that need to be changed to this
<access origin="*" />
1.in /assets/www/config.xml
2.in /res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.
I have a problem with AJax/Json petitions with PhoneGap. I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cartelera</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="cordova-2.0.0.js">
</script>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<script src="my.js">
</script>
<script>
$(document).ready(function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 1 </a></li>');
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 2 </a></li>');
$('#cargaDiv').html('<img src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/images/ajax-loader.gif" /> Cargando...'); // Loading message
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
})
</script>
</head>
<body>
<div data-role="page" id="cartelerafinestrat">
<div data-role="header">
Atras
<h1>IMF Finestrat</h1>
</div>
<div id="cargaDiv">
</div>
<div id="cartelera">
<ul id="ulCartelera" data-role="listview" class="ui-listview" data-theme="d" data_dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
</pre>
I have added in config.xml (/res/xml/) my domain ("http://www.cinesimf.com/*") in the phonegap whitelist.
If I try the code in a navigator in my pc, it works OK, but in Android aplication nevers load.
Your problem depends on a general webkit (and modern browsers) issue.
If you want to do a json request to a cross-domain server you have to modify your manifest file on Android or your plist file non Iphone, inserting the allowed domains where you want to get your data.
You could also do a jsonp request to avoid manifests updates:
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php?callback=?",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
You can have a good explanation about jsonp there: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
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'.
I want to make a native Android application for a website.
The first problem is how to login in a website using an Android native app, (without any change on the existent webservice site), the Android app should remain connected until a click on a logout button. I have to ask about this matter and some people suggested Json.
I have downloaded JSON and GSON library and I tried to see some tutorial for login in this website with Android app with no success.
Now the access page of the website has this code
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="templates/images/favicon.ico" />
<link rel='stylesheet' href='templates/css/base.css?1330075048' type='text/css' />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/srte.js"></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000000-1']);
_gaq.push(['_setDomainName', 'domainname.it']);
_gaq.push(['_trackPageview']);
</script>
<title>Nomes - Login</title>
</head>
<body class='login' style='background: #fff;'>
<div id="headwrapper" style='height:80px;'>
<div id="head">
<div class="logo" dir="ltr"><a href='http://www.domainname.it'><img src='templates/images/image.jpg'/></a></div>
<div class='banner'><img src='templates/images/banner-head.jpg'/></div>
</div>
</div>
<div id="theadwrapper">
<div id="tabhead">
</div>
</div>
<div id='background_wrapper'>
<div id="wrapper">
<div id="messages"></div>
<div><h5>Email</h5><input id='email' type='text' name='email' /></div>
<div><h5>Password</h5><input id='password' type='password' name='password' /></div>
</div>
<div class='rememberme'><input type='checkbox' name='remember' id='remember_me'>Ricordami</div>
<div class='submit'>
<button type='submit' name='post' class='medium green'>Accedi</button><br/>
<p>o <a href='register.php'>Iscriviti</a></p>
</div>
</form>
<div id='reset_pass'>Hai dimenticato la password? Clicca <a href='resetpwd.php'>qui</a></div>
</div>
<div class='advert'>
<br/><br/><img src='templates/images/sfumatura-orizzontale.jpg' />
<div class='circles'></div>
</div>
<script>
$(document).ready(function(){
$('#login_form').submit(function(e){
e.preventDefault();
if ( ($('#login_form #email').val() == "")
|| ($('#login_form #password').val() == "") ) return;
$('#login_form').attr("disabled", "disabled").css({opacity:0.5});
$(this).ajaxSubmit({
dataType: "json",
success: function(data) {
if (data.isError) {
Bore.error(data.errorMessage);
$('#login_form').removeAttr("disabled").css({opacity:1});
}
else {
window.location.replace(data.data.defaultPage);
}
},
error: function() {
$('#login_form').removeAttr("disabled").css({opacity:1});
console.log('error');
}
});
});
});
</script>
<div class='circle'></div>
</div><!-- login_content -->
<div style='clear:both; padding: 10px;'></div>
</div><!-- wrapper -->
</div> <!-- bg_rapper -->
You should access the server interface with the parameters that your server accepts.
Access the site parsing the PHP and using the nested function in the PHP code, is a really bad idea.