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.
Related
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>
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype 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" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false
I must be missing something very basic in the CSS. My jQuery anchor button is functional, but it's rendering as a simple underlined label, not asa rounded-corner UI button. I would be grateful if someone could point out the error in this simple example.
Thanks
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="en-US">
<HEAD>
<TITLE>button test</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="Sat, 22 May 2010 00:00:11 GMT">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(
function() {
$('a','.test').click(function(){showIntro();return false;});
});
function showIntro()
{
document.location.href="intro.htm";
}
</script>
<body>
<div class='test'>Button</div>
</body>
</html>
You need to actually make it a button using .button(), like this:
$(function() {
$(".test a").button();
});
You can see the jQuery UI demos here and a demo of your markup working here.
You need to add the proper class to the link, using jQuery or otherwise.
Try:
Button
You do not need to make it a button you just need
$(".test a").click(function(){showIntro();return false;});
What you are trying to do with your selector passing the second paramater is the Scope.
The second paramater is not mean to be a string (selector) it should be a jQuery Object.
So if you wanted to do it your way your would have to say
var test = $('.test');
$('a',test).click...
But the 1st method is prefered over doing it this way.
Sorry to be providing an answer, if not "the" answer, to my own question, but I have discovered a clue as to what's going on, if not the ultimate cause of the behavior. Below is code cut and pasted from the Button example on the jQuery website; take it to jsFiddle and run it: it works. But if you remove this line relating to the input-button:
$("button, input:submit, a", ".demo").button();
then the anchor-button fails to render properly. Why is the anchor-element's rendering dependent on the existence of the input-button?
<script type="text/javascript">
$(function() {
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
});
</script>
<style>
</style>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button">
An anchor
</div><!-- End demo -->