I am trying to build a very simple android application using phonegap along with eclipse.I am very new to phonegap . When i run the application the page gets displayed in the emulator but my javascript alert function is not working.Can someone please help me ?? Here is my index.html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady()
{
alert('hello');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="content">
<p>Hello Phonegap!!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Add this phonegap version tag in your html page.
<script src="cordova-x.x.x.js" charset="utf-8" type="text/javascript"></script>
Without this, phonegap events will not work on your page.
Related
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
And my JS/jQuery:
$("#generateButton").on("click", function() {
alert("Hello");
})
If you are wondering why the only thing my Random Number Generator is supposed to do is saying "Hello", that's because I was trying to figure out why my code wasn't working properly, and then I found out it was jQuery not working.
The file 'script.js' is linked properly though, because when I tried the normal JS alert with no jQuery code, it worked fine.
This is the part of the code where I am linking to jQuery:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
Yes, I am linking jQuery from 3 different sources, just in case. That is because the first one didn't work, the second one didn't either, so I just wanted to make sure.
Assuming script.js is where your code lives, when you do
<script src="script.js"></script>
There is no $("#generateButton"). You can either move your script to just before the </body>, or wrap you code in
$(function() {
//your code goes here
});
which tells it to wait for the document to load before executing.
You just put your code before loading jquery, you should put your script after not before.
It make sense in programming to import or load the lib before using something from it
$(function(){
$('#generateButton').click(function(){
alert("functional");
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
I am using Phonegap with ngCordova and AngularJS. I am trying to use the following plugin (PhoneGap-Image-Resizer) to help me save some media to the device. My issue is that my plugin is giving me the following error:
[phonegap] [console.error] Error: undefined is not an object (evaluating '$window.imageResizer.getImageSize')
This only happens when i check the app on my device, when I run it locally through localhost:3000 I do not get the error. I get similar results when running a console log after the DeviceReady call. In the browser it is fine, where on the device it is undefined.
After a lot of research I have seen a few check the cordova.js file is being referenced in my index.html, which as you can see below it is:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body class="app-container">
<div class="app">
<div ng-app="MyApp" class="ui-view-container">
<ui-view class="main-view">
<img src="/img/logo.png" alt="my App" class="loading-logo"/>
</ui-view>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/angular-touch.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/angular-foundation.js"></script>
<script type="text/javascript" src="js/angular-modules/app.js"></script>
<script type="text/javascript" src="js/angular-modules/controllers/main.js"></script>
<script type="text/javascript" src="js/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Here is my partial
<div class="row collapse expanded text-center camera">
<div class="row">
<div class="small-12 columns end">
<canvas id="canvas" height="250" width="375"></canvas>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h2>Image of canvas</h2>
<img id="CanvasImage" alt="text" />
</div>
</div>
<div class="row">
<div class="small-6 columns">
<a class="button expanded" ng-click="camera()">Camera</a>
</div>
<div class="small-6 columns">
<a class="button expanded" ng-click="savecanvas()">savecanvas</a>
</div>
</div>
</div>
Here is my controller
angular.module('MyApp')
.controller('CameraCtrl', function($scope, $cordovaCamera, $rootScope, $location, $window, starFactory) {
$scope.savecanvas = function() {
document.addEventListener("deviceready", function() {
var theCanvas = document.getElementById('canvas');
var CanvasImage = document.getElementById('CanvasImage');
CanvasImage.src = theCanvas.toDataURL("image/png");
$window.imageResizer.storeImage(
function(data) { console.log('It worked!');},
function (error) {console.log("Error : \r\n" + error);},
theCanvas.toDataURL("image/png"),
{imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,format: ImageResizer.FORMAT_JPG}
);
}, false);
};
});
If anyone could please help me, understand why when i am on my device the plugins are undefined, when they work fine on the browser I will be very thankful.
I see you get the data URL from the canvas as a PNG but then try to store it as a jpg?
Maybe try this:
theCanvas.toDataURL("image/jpeg", 1);
Instead of this:
theCanvas.toDataURL("image/png");
I studied about the plugin in the Git-hub. There in the Android quirks and howto's section, it is mentioned that the The storeImage funtion will always store the image to the device's default external storage, under the given Directory and filename. the photoAlbum property will be ignored. If this is the case, I think you need to have the external memory card in your mobile device.
This was a very tricky one to get my head around but we have finally got an answer. Phonegap uses Hydration, which is a way to update your application without having to reinstall it each time. Turns out there is a bug with Hydration in Phonegap 6.5.0 that means the cordova.js file is not loading properly. To solution to this is to Turn off Hydration. Once i turned that off, the plugins started to load on the device.
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
Okay, this is going to sound very imbecilic. (which it probably is)
I'm a very novice programmer, so please bear with me.
I'm trying to link a simple jQuery file to my HTML file, but I can't seem to make it work. After looking through the previous answers to this trivial question, I realized that i was missing pivotal lines of code such as (and this is just an example)
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
Again, I know I must sound very stupid.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
My jQuery code is as follows:
$(document).ready(function() {
$('#green').fadeOut(1000);
});
Can someone please tell me how to link the jQuery file to the HTML file? I know this question has been asked 500 times, but for some reason I am unable to make this work. Thank you very much! Sorry for making you cringe with my ineptness.
First of all its is mandatory to include jQuery library.
There are few ways you can link your jQuery code in html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
This is how you can integrate your codes:
Method 1 (In Footer)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</body>
</html>
Method 2 (In Header)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Method 3 (From External File) Lets say you have a file custom.js that has you codes :
$(document).ready(function() {
$('#green').fadeOut(1000);
});
This is how you can add external js file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Update: Path Example
- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html
url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js
Just add your initial jquery load to the header beneath the stylesheets. You want to load any css before you load your jquery scripts (in the future).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#green {width: 150px; height: 150px; background: green; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});
});//]]>
</script>
</head>
<body>
<div id="green"></div>
</body>
Do note that you load jquery before you use any part of the script calls ($).
Hope that helps!
Here's your fiddle:
http://jsfiddle.net/2633c1em/
Put your script tag in header section like
<head>
<script type="text/javascript" src="your jquery file name "></script>
</head>
file name like load.js
Hi all I am navigating from index.html to test.html as $.mobile.changePage("test.html", {transition : "slide"}); which works fine. But in my test.html there are multiple html pages in different div. In test.html I am calling different html page which is in different div in same html file (i.e.test.html ) as $.mobile.changePage("#secondtestPage", {transition : "slide"}); But here it is not navigate to secondtestPage. My index.html is as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
Now page navigate to test.html and my test.html looks as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
But now on click of button it is not navigating to "callSecondPage". and if I call $.mobile.changePage("index.html", {transition : "slide"}); then it navigate to index.html properly, then why in multipage changePage is not working? one more thing If I replace index.html code with test.html code then $.mobile.changePage("#secondtestPage", {transition : "slide"}); works perfectly.
I am confused why it is behaving like this? Any suggestion will be appreciated. Thanks in advance.
jQuery Mobile will asynchronously load the contents of your test.html file in order to transition to it. You have a callSecondPage() function defined within the same scope in both index.html and test.html which is probably at fault. Try naming it something different in test.html and report back.
EDIT:
OK, it turns out that jQuery Mobile does not actual load all of your other data-role="page" pages other than the first. If you inspect the DOM while transitioning from index.html to test.html, you'll notice the second, third and forth pages are missing.
This is from the jQuery Mobile documentation:
http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html
It's important to note if you are linking from a mobile page that was
loaded via Ajax to a page with multiple internal pages, you need to
add a rel="external" or data-ajax="false" to the link. This tells the
framework to do a full page reload to clear out the Ajax hash in the
URL. This is critical because Ajax pages use the hash (#) to track the
Ajax history, while multiple internal pages use the hash to indicate
internal pages so there will be a conflicts.
I added false value to end of the method, which solved the problem:
$.mobile.changePage("#secondtestPage", {transition : "slide"}, false);