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
Related
I have the following code, and it seems clear that JQuery is working, but some JQuery Mobile events are not firing at all:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Mobile Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.custom.complete.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.custom.complete.theme.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.custom.complete.structure.min.css"/>
<script>
$(function(){
$(document).on("touchstart", function(e){
$('#touchstart').html("touchstart");
});
$(document).on("touchend", function(e){
$('#touchend').html("touchend");
});
$(document).on("touchmove", function(e){
$('#touchmove').html("touchmove");
});
$(document).on("touchcancel", function(e){
$('#touchcancel').html("touchcancel");
});
$(document).on("tap", function(e){
$('#tap').html("tap");
});
$(document).on("taphold", function(e){
$('#taphold').html("taphold");
});
$(document).on("swipe", function(e){
$('#swipe').html("swipe");
});
});
</script>
<style>
</style>
</head>
<body>
<div id="touchstart">-</div>
<div id="touchend">-</div>
<div id="touchmove">-</div>
<div id="touchcancel">-</div>
<div id="tap">-</div>
<div id="taphold">-</div>
<div id="swipe">-</div>
</body>
</html>
I'm trying it out on Chrome on an Android. Of the above events, these don't work: tap, taphold and swipe. I have triple checked the file URLs.
The versions of JQuery above: JQuery: compressed, production 3.1.1, and the latest JQuery Mobile: 1.4.5, custom with all options, minified.
Annoyingly it works as expected when I replace the link and script tags with a (random) earlier version, hosted by JQuery:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
And it doesn't work when I use the latest JQuery-hosted versions:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
But I need to host the files myself and I would like to have the latest versions. What am I doing wrong? Are there differences in the API? Or is it a JQuery bug?
To expand on Omar's comment above...
jQuery Mobile isn't compatible right now with the latest version of jQuery. If you look at the jquerymobile homepage, you will see under the download buttons (top-right) what versions of jQuery you can use. Currently for jQM v.1.4.5 you need:
jQuery 1.8 - 1.11 / 2.1
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 a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Inline DateTimePicker</h3>
<input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
</body>
<!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker({
inline:true
});
</script>
</html>
However, when I run this code, I get an error that says:
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
This is what I want to display:
How can I get an Inline calendar to display on my Home.html page?
Put
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head> tags and remove
<script src="./jquery.js"></script>
I had the same sort of issue , If download the the source code from the XDSoft site
there is build folder , try using jquery.datetimepicker.full.js file from build folder .
You need to include jquery-ui.js
Do not confuse between jQuery versions. You first referenced jQuery here:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
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.
I'm trying to implement the jQuery UI Date Picker with the Time Picker addon (http://trentrichardson.com/examples/timepicker/).
I have the js and css saved in the same directory as my script as timpicker.js and picker.css respectively.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="picker.css" />
<script src="timepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$('#from').datetimepicker();
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from" />
</body>
</html>
Firebug keeps giving me these errors:
ReferenceError: jQuery is not defined
[Break On This Error]
})(jQuery);
datetimepicker.js (line 1919)
TypeError: $(...).datetimepicker is not a function
[Break On This Error]
$('#from').datetimepicker();
Has anyone else come across this problem. I'm sure I'm missing something simple, but I have been unable to find anyone with the same problem.
Thank you
You are loading the timepicker.js before you load jQuery. Your page is trying to run timepicker.js and doesn't know anything about jQuery. Rearrange your scripts like:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="timepicker.js"></script>