In this example,
http://jsfiddle.net/7Ev43/2/ the inclusion of the first <script> line (<script src="http://www.polymer-project.org/platform.js"></script>) causes the jQueryMobile events pagebeforecreate and pageinit events not to fire, in Safari and Firefox. However, it works in Chrome.
Any ideas on how to amend this?
Further investigation:
It appears that on Firefox and Safari, platform.js is overriding addEventListener
At this point I'm not sure how to proceed further, any suggestions would be most welcome.
full example:
<!DOCTYPE >
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).on('mobileinit', '#mainpage', function(){
console.log("mobileinit");
})
$(document).delegate("#mainpage", "pagebeforecreate", function(){
console.log("pagebeforecreate")
})
$(document).on("pageinit", '#mainpage', function()
{
console.log("pageinit")
});
console.log('end of script')
</script>
</head>
<body>
<div id="mainpage" data-role="page" data-theme="b">
</div>
</body>
</html>
Related
I am trying to build a small mobile app with JQuery Mobile and EmberJS.
This is actually a Rhodes Application (Rhomobile).
This is my Layout.erb:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Todo</title>
<!-- Ember Libraries -->
<script src="/public/js/libs/handlebars-1.0.0.js"></script>
<script src="/public/js/libs/ember.js"></script>
<script src="/public/js/libs/ember-data.js"></script>
<!-- Ember Application -->
<script src="/public/js/application.js"></script>
<script src="/public/js/router.js"></script>
<script src="/public/js/models/todo.js"></script>
<script src="/public/js/controllers/todos_controller.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
$.mobile.loadingMessageDelay = 300; // in ms
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loadingMessageDelay = 50; // in ms
});
</script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
<script src="/public/js/jqmobile-patch.js"></script>
</head>
<body data-platform="<%= Rho::System.getProperty('platform') %>">
<%= #content %>
</body>
</html>
As you can see I have disabled Ajax and PushState and stuff. This is my index.erb:
<script type="text/x-handlebars" data-template-name="todos">
<div data-role="page">
//My Template
</div>
</script>
Now when I try it, I just get a blank grey page. But no error in console or in Ember-Console (extension of Chrome). It even detects my views and controllers properly.
Then I try commenting the JqueryMobile CSS files and what I get is a page's height worth of blank space with "Loading" message and then I see my application below and it works fine. And if I remove JqueryMobile JS, I get the stuff but its not styled.
What is the problem?
It's kind of hard to say without seeing some more code of your app. If you only have the one template defined ('todos') it may be the case that Ember doesn't know how to kickstart the rendering of your app. You may need to define an 'application' template. It might be as simple as:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
I have an issue with vclick (or click) events when fired.
This is my html code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/functions.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
And this is my functions.js
$(document ).bind("mobileinit", function(){
$(document).bind("pageinit",function(){
$("#btn_comentar").bind("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
}
When I click my #btn_comentar, the data that I want to retrieve from function list_comments (sending via ajax) is duplicated; I realized that it was sending twice, and finally that it was something about when I clicked on my button.
This is the output from the console (twice):
false
undefined
null
and also the alert message box (twice) "buttoon";
I have tried some solutions like:
jQuery Mobile : replace click event by vclick event
but without success, please need some help
This is my new code and how it is now working, but it seems that without jQuery Mobile's default configuration
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/custom-mobile.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/functions.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
custom-mobile.js
$(document ).bind("mobileinit", function(){
//$.mobile.allowCrossDomainPages = true;
});
functions.js
$(document).on("ready",function(){
$("#btn_comentar").bind("vclick",function(){
list_comments();
});
});
According to docs,
These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure using the mobileinit event.
So that's what you need to use mobileinit for. For setting defaults like this :
$(document).bind('mobileinit', function(){
$.mobile.defaultTransition = 'slideup';
});
If my understanding is right, mobileinit is included/fired before jQuery Mobile's js is included. Assuming you done that, your script order must look like this :
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
At this point of time (when custom-scripting.js is loaded), pageinit wouldnt be defined.
It would be wise to add your pageinit event AFTER jQM script.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
<script>
$(document).bind("pageinit", function(){
$(document).bind("vclick", "#btn_comentar" ,function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
</script>
use once on pageinit:
$(document).on('pageinit') {
$("#btn_comentar").on("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
}
this should work
Another cause of double-vclicks I've encountered is due to Chromium synthesizing both touch events in addition to mouse events. I confirmed this cause by running the app in desktop Chrome's developer "device mode" (where the mouse cursor changes into a circle), confirming the problem exists, then toggling off device mode, and confirming the problem is "fixed".
jblas discusses it, partial excerpt:
Note that vclick does NOT suppress the synthesized mouse/click events that are generated by the browser because it does not know what context it is being used in, AND form input elements require the mouse/click events to function normally.
If you use a joystick or mouse (desktop), the alert will fire on the normal mouse click event.
If you want to suppress the click event while using touch, you have to call event.preventDefault() in your vclick handler. This will queue the request to kill the click event that follows but due to the differences in the way device vendors implement their events, and some bugs within different android OS versions, this turns out to be very hard to do. We try a couple of methods to figure out whether or not to kill a click event ... one is based on the element the touch event was triggered, on, and another is the position of the touch event. This is necessary because The browser does not necessarily dispatch the mouse events to the same element that it used for the touch event.
I embedded phoneGap in my UIWebView, referenced to this doc:
http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_ios.md.html#Embedding%20Cordova%20WebView%20on%20iOS
And in the index.html, I write this sample code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
after the webview loaded, the "body" can be shown, but the alert can't be pop out. So the jquery.js is not loaded? Or something else is wrong?
Edit:
I added "http:" to the src, but not work.
Thanks!
change
alert(“jquery loaded”);
to
alert("jquery loaded");
or
alert('jquery loaded');
Add http or https to your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The above should work for you.
Did you add the Cordova file?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Also as much as phonegap uses HTML 5 it still requires a bit different style of writing your code. Everypage you make should all be in the same index page because Cordova loads at startup in your project. If you navigate away from the page Cordova needs to reload.
Did you copy jquery file at www forder (www/jquery.js). I use jquery too, mine is www/js/jquery.js
Try this!!!
Ok so im expanding my existing MVC4 app into a mobile app.
Totally new to jquery mobile and im having so many issues with this in MVC.
Layout pages (MVC) and jquery mobile are a nightmare to work with or is it just me?
So im simply trying to show jquery ui datepicker in my page, it does not show!
I have to do a reload of the page for it to show, why???
Ok Layout page
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
#RenderBody();
</body>
</html>
and now the view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";
}
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
#using (Html.BeginForm())
{
<div data-role="page" id="pageAccount">
<div data-role="content">
<div id="datepicker"></div>
</div>
</div>
}
Any ideas why the page shows, but no datepicker (I have to reload the page for it to show)?
Solution :
This should be changed:
$(function() {
$( "#datepicker" ).datepicker();
});
to this:
$(document).on('pageshow', '#pageAccount', function(){
$( "#datepicker" ).datepicker();
});
To make a story short. jQuery Mobile should not be used with classic DOM ready jQuery functions. Instead jQuery Mobile is providing us with page events. If you want to find out more about jQuery mobile page events and how they work take a look at this ARTICLE, to make it transparent it is my personal blog. Or you can take a look HERE.
Edit :
Here's a working example:
Change positions of
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
into:
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery Mobile should always load last when used with jQuery UI.
Also you have forgot jQuery UI CSS, you will find datepicker without its CSS formatting.
I have this simple code, like that on the official site.
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Obviously in the same folder I've moved the interested files and all works ok.
But the layout is awful, because sure miss something.
My output is this:
http://imageshack.us/photo/my-images/854/wrongdate.png/
How can I solve this problem?
Thank you.
I dare say it's the style file: you probably have an incorrect path for the file or the file is corrupted. See the following two examples:
without css: http://jsfiddle.net/william/5Xa8f
with css: http://jsfiddle.net/william/5Xa8f/2/
To confirm it is the problem, simply replace jquery.ui.all.css with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css, and see if the problem is fixed.