Guys I'm currently working on the development of an app using phonegap on eclipse, but I hit a bump when I'm trying to display an image, I have tried thousands of ways to modify my code, but the image just cannot be displayed, but when I browsed through others' coding, I didn't see much difference, will really appreciate it if you guys could help me figure out.
My code for a certain page is shown below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Us</title>
<link rel="stylesheet" href = "css/jquery.mobile-1.4.5.min.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js">
<script src = "js/jquery.mobile-1.4.5.min.js." type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js"></script>
<script type = "text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
document.addEventListener("backbutton", function(e){
e.preventDefault();
alert("Back Button Pressed");
navigator.app.backHistory();
}, true);
}
</script>
</head>
<body onload = "onBodyLoad();">
<div data-role = "page" id = "aboutus">
Back
<div class="ui-btn-active" data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<img src="images/icon.png">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
You must use this route:
<img src="images/icon.png">
Related
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
I am developing android apps using phonegap + Jquery mobile. My apps displaying the list in listview div but look and feel of listview not working on 2.3.3 and working fine on version greater than 3.0.
following is the my index.html page. please suggest me answer.
<!DOCTYPE HTML>
<html>
<head>
<title>ListView</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.1.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery.mobile-1.4.1.js"></script>
</head>
<body>
<div data-role="page" id="courseList">
<div data-theme="a" data-role="header">
<h3>
Course List
</h3>
</div>
<div data-role="content">
<!-- <div class="example-wrapper" data-iscroll> -->
<ul data-role="listview" id="output" data-theme="b">
</ul>
<!-- </div> -->
</div>
</div>
</body>
<script>
$(document).ready(function() {
if(window.isphone) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
// device APIs are available
function onDeviceReady() {
// Now safe to use device APIs
$.ajax({
url:"http://www.cilibrary.ojaswitech.com/getLatestNews",
// crossDomain: true,
//type : "POST",
dataType: 'json',
async: true,
success: function (result) {
$.each(result, function(i, item) {
$('ul').append('<li><a href="">' + item + '<p></li>');
});
$('#output').listview("refresh");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
</script>
</html>
following is the two images. first is left side image 2.3.3 and second is right side image 4.2.2
This is a known bug which is introduced in version 1.4.1 and effects Android 2.3.x devices and IE8. The problem is in lines 3195 and 3222 of jquerymobile.js. There's a default property which happens to be a reserved keyword.
You can solve this problem either by modifying these two lines;
duration = $.fn.animationComplete.default; // this
duration = $.fn.animationComplete.defaultDuration; // to this
// and
$.fn.animationComplete.default = 1000; // this
$.fn.animationComplete.defaultDuration = 1000; // to this
or wait until version 1.4.2 is out with the fix for this bug.
Reference
Acctually there might be an even easier way. Try with replacing:
$('#output').listview("refresh");
with this instead:
$('#output').listview("create");
=) Good luck!
Danny
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 trying to set focus to the input box and showing android keyboard using jquery mobile on pageshow.
I tried a lot of options from web. but none is working as expected in both emulator and mobile.
Here is the Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" id="main">
<div data-role="header"><h3>Set Focus, Show Keyboard</h3></div>
<div data-role="content">
<label for="gotoPage"></label>
<input type="text" name="gotoPage" id="gotoPage" placeholder="Question No." data-mini="true" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('pageinit',"[data-role=page]", function() {
});
$(document).on('pagebeforeshow',"[data-role=page]", function() {
});
$(document).on('pageshow',"[data-role=page]", function() {
$('#gotoPage').focus().select();
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
Find the Screen shots for reference
Kindly advice... Thanks in advance...
NOTE:
As per Omar comment it is working fine in ios....
anyone can suggest how we get work this in android?
The solution which works for me:
$("#main").on("pageshow" , function() {
$('#gotoPage').focus();
});
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/