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
Related
i'm building a website and i had a plugin working fine.
But when i tried to insert it into my website it stop working. After some test i noticed it's happening after a load the content with ajax. Searching here, i saw a similar question and the solution was to use the .on() event with Jquery. I did that, but stilldoesn't work.
What am i doing wrong? (i'm new to jquery, don't understand that much)
Here is what i have:
HTML:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<ul id="list">
<li>Home</li>
<li>Split</li>
<li>Contact</li>
</ul>
<div id="content"><!-- content ajax -->
</div><!-- /content ajax -->
<script src="js/classie.js"></script>
<script src="js/cbpSplitLayout.js"></script>
</body>
script.js (load the page)
$(document).ready(function(){
$('#content').load('content/home.php');
$('#list').on( 'click', 'a', function() {
console.log('log confirm');
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
return false;
});
});
And the plugin i'm trying to run is a external plugin: Split Layout.
I got it from this website here: http://tympanus.net/codrops/2013/10/25/split-layout/
And this is a pastebin to it's js script: http://pastebin.com/yfJXGR8f
Is JQuery library included in the pages called by AJAX ? That could be the solution simply include
<script src="js/jquery.js"></script>
on your AJAX pages' <head> tag
can you please tell me why my alert is not display .I am using bootbox.js plugin(http://bootboxjs.com/v3.x/) .but it is not display my alert as given in site ?
here is my code..
http://jsbin.com/kopalire/1/
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/8nlfxc5zh58uf9o/bootbox.min.js?m="></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="clikId">add</button>
</body>
</html>
JS CODE
$(function () {
// Code goes here
$(document).ready(function(){
$('#clikId').click(function(){
bootbox.alert('Hello alert')
})
})
});
BUT when I change bootstrap 3.2 to 2.3 it works why ? if i include this it works why ?
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You are using Bootbox v3.3.0, which is not compatible with Bootstrap 3. Take a look at the Bootbox's dependencies table: http://bootboxjs.com/#dependencies
I tried your JS Bin example with Bootbox v4.3.0 and Bootstrap v3.2.0 and it works just fine: http://jsbin.com/kopalire/3/edit
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 going to try this: http://jquerytools.org/demos/scrollable/index.html
But without any event trigger, I m getting below error
But I have confusion about, why the on method not finding in even page load
<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
</head>
Nothing done at javascript part
<script>
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
It stopped my further implementation. Have any idea about this?
JQuery .on method was added in 1.7. You need to update your JQuery as from your screenshot you are currently using 1.6
http://api.jquery.com/on/
Once downloaded from here, change the below where marked
<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script> <!-- Change this line -->
<script src="js/jquery.tools.min.js"></script>
</head>
You need to update jQuery version.
Because jQuery 1.6 does not have .on() it's added into new version of jQuery.
You are using jQuery 1.6.1 - on() didn't exist back then (not until 1.7).
Your options:
Either you use bind() instead.
Or you update to the latest jQuery.
In regard to the second option, replace
<script src="js/jquery-1.6.1.min.js"></script>
with
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
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