I'm trying to build my first mobile app. What I usying: AngularJS, Mobile Angular UI, jQuery and PhoneGap.
My code:
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<link rel="stylesheet" href="/css/demo.css" />
<script src="/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MainController">
HERE HTML CODE
<script>
HERE ALL LOGIC
</script>
</body>
</html>
In all browsers all works fine, but when I getting apk file from PhoneGap and running it on my Nexus 4 (Android) I seeing white screen :*(
you need to add the below line at the start of the the head tag
<script type="text/javascript" src="cordova.js"></script>
Also make sure you check the deviceready event to make any native device API calls.
Related
When I use the Google Chrome Developer Tool in my web page developed using ASP.NET Core 1.0 (.NET Framework) project I detect the error: bootstrap.js: Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3. Can't figure out the cause of the error. The source view of my web page is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
Hello world.... and other content
.....
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a5c076a64ad7453f951bb2251bd6eec3","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:58884/74edce98fdb542fc9b4a680a345ade26/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Except these lines
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
Put this line :
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
And btw your question is duplicate I think :)
I am working on cordova appache app on VS2015 . I want to use jquery in my app as I use it in web app . I tried to make it but it dosen't work . here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<!-- test references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready!</p>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
<script>
$(document).ready(function () {
alert("test!");
});
</script>
Please advise .
There's no jQuery script linked there. Surely you need to add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
(Or a link to the jquery file on your server)
To your script links - probably before index.js.
EDIT: Also your script tag is outside your HTML. Move it to the bottom of the body tag, instead:
<script>
$(document).ready(function () {
alert("test!");
});
</script>
</body>
</html>
This is my code . It is the basic template found in the angular jqm github account . There seems to be some error in the imports . As there is not much code there except that .
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile.structure-1.3.2.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile.theme-1.3.2.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css"/>
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="ang/angular.js"></script>
<script src="ang/angular-mobile.js"></script>
<script src="ang/angular-jqm.js"></script>
<script src="ang/angular-scrolly-docs.js"></script>
<script>
function TextController($scope) {
$scope.someText = 'You have started your journey.';
}
</script>
<script src="app.js"></script>
</head>
<body ng-app="app" jqm-caching-view >
<div jqm-page>
<div jqm-header>
<h3>Header</h3>
</div>
Hello
<p>{{someText}}</p>
<div jqm-footer>
<h3>footer</h3>
</div>
</div>
</body>
This is the output:
Neither the angularjs is working nor the JQM .
What's in your app.js file?
First of all, you need something like "var myApp = angular.module('app', ['jqm']);" to make your app use angular-jqm.
Secondly, you need ng-controller (or routing code) to hook up the TextController to the current page.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I just download jquery mobile 1.2.0
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
But I have this error
Uncaught TypeError: Cannot read property 'msie' of undefined
I have the same error when I run the project on an android device with phonegap
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.theme-1.2.0.min.css" />
</head>
<body>
<h1>Hello PhoneGap !!!</h1>
<script type="text/javascript" charset="utf-8" src="javascript/cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="javascript/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="javascript/jquery/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
Thanks
According to this page: http://jquerymobile.com/test/#/test/docs/about/getting-started.html
"jQuery Mobile 1.3 RC1 (1.3.0-rc.1) works with versions of jQuery core from 1.7.0 to 1.9.0."
So my guess is that you need to back down your jQuery core to 1.9.0, at least, if you upgrade to jQuery Mobile 1.3 RC1.
Looks like 1.8.2 for jQuery 1.2.0: http://jquerymobile.com/demos/1.2.0/
you can add the
jquery-migrate-1.1.1.min
<script src="~/Scripts/jquery-migrate-1.1.1.min.js"></script>
to your list of referenced scripts