I'm using the jquery ui autocomplete for my jquery-mobile site. It is working without problems, als long as I open the site directly.
If i navigate to the side with ajax navigation it doesn't work.
Edit testable example:
<div data-role="page" data-theme="b" id="main" data-add-back-btn="true class="main"">
<div data-role="content">
<input type="search" name="search" id="search" value="" />
</div>
<script>
$('#main').live('pagecreate',function(event, ui) {
var availableTags = [
"Testone",
"Testtwo",
"Testthree"
];
$( "#search" ).autocomplete({
source: availableTags,
minLength: 2,
});
});
</script>
</div>
I have a jQM site with autocomplete, and hit a similar issue: the ajax call triggered to populate the autocomplete options wasn't always done by the time the page wanted to fire the autocomplete code itself.
I put this down to the nature of the Javascript being triggered (i.e. it's asynchronous, so you take your chances…).
Now, this is a bit of a hack I know, but adding a wee time-out worked for me (you will need to experiment with the time period). In my app I have something like this after my jQM $(document).bind("mobileinit"... code:
<script type="text/javascript">
$(function(){
// Horrible, but necessary
setTimeout(doAutoComplete, 2500);
});
function doAutoComplete(){
$( "#YOUR_FIELD_ID" ).autocomplete({
// Your ac code here…
});
}
</script>
Related
I'm trying to test out the jquery-ui's tooltip to no avail. Here is what I did: https://jsfiddle.net/o99ua97c/. But it is not working and I couldn't quite figure out why.
<script>
$(document).ready(function(){});
$('#myINPUT').tooltip({
function() {
content: return 'tooltip from jquery-ui';
}
});
</script>
</head>
<body>
<label for="myINPUT">Enter Something</label>
<input type="text" size="20" id="myINPUT"/>
</body>
The document ready should be around the tooltip call. The tooltip is called to early now.
Edit, there seem to be some other problems as well.
I have problem with mobile/tablet version of page which I create
I need this: When someone look at product detail and move him to right/left (touch/swipe) then I need load next/previous product detail (= Example: Now I on page with id=2 when I go right, then I load page with id=3, npw I on page with id=3 and I go left then I load page with id=2.. etc.. with different pages id).
I look in thread here, but this solution is not dynamic and I have problem applicate it. Next I inspirated in W3C here.
Now I have these codes which not work:
JS file:
$(document).on('pageinit', function() {
$('.epicFullscreen').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
});
$('.epicFullscreen').bind('swiperight', function()
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide");
});
});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });
HTML:
<script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="funkce/skripty.js" type="text/javascript"></script>
I need use old JQuery 1.7.1. because this site using it and everything works fine, with newer JQuery I can have new problems. For that I use older JQuery-mobile 1.3.2. which must work with JQuery 1.7.1. ("jQuery Mobile 1.3 supports jQuery 1.7 and newer") . I can´t include "jquery.mobile-1.3.2.min.css" because this styles not work together with my styles correctly.
HTML in body is like that:
<div class="epicFullscreen">
<img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
</div>
Now I have dynamic solution with arrows (right/left) and with adding correct urls with PHP, but on tablet/mobile user like using touch not clicking on arrows etc...
=> Where I have problem and why not work my current solution? And how I can change this static JS to dynamic JS?
try this simple code .....
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I found solution for that I make this answer. I simplify my problem and create simple page.
Code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).on("pageinit",function(){
var pathname = $(location).attr('href');
var leva = $('#le').attr("href");
var prava = $('#pr').attr("href");
$("body").on("swiperight",function(){
<!--alert("You swiped right!");-->
location.href=prava;
});
$("body").on("swipeleft",function(){
<!--alert("You swiped left!");-->
location.href=leva;
});
});
</script>
</head>
<body>
<div id="test_div" style="display: block;">
<img src="test.gif" width="100px">
<a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
<a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>
</body>
</html>
I have this one hack - in PHP I know on which page I am, which page is before and which is next, I add this links it to arrows (which have tag "a"). This function working perfect. But I use this functional code to get correct URL => I don´t need some big function in JQuery which can split actual url with RegEx, know on which page I am, know if exist next page etc... Now I must only style this code to my page, but this is working.
I thank Omar for his time and I close this topic.
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
I am trying to create the same panel for several pages of my html/css/js app with jquery mobile using the solution here .
But unfortuantely, it is like for the content of the panel, the jquery mobile style is not aplied....instead of this, it just plain old html.
How can I apply jquery mobile style to the content of the panel? Is there some kind of refresh command for this?
Here is my panel:
$(document).on('pagebeforeshow', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$.mobile.activePage.find('#mypanel').panel();
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Here's the page:
<div id="welcome-page" data-role="page">
<!--<div data-role="panel" id="mypanel">
</div>-->
<header data-role="header">
</header>
<div id="content" data-role="content">
</div>
<footer data-role="footer">
</footer>
Thanks
I have made an original post so let me show you a different way, instead of using pagebeforeshow event you can use pagebeforecreate. It is important because at that point content is still not styled. Any dynamically added content will be automatically styled so you don't need to worry about that.
$(document).on('pagebeforecreate', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Working example made on a basis of my original answer: http://jsfiddle.net/Gajotres/pZzrk/60/
Using jQuery jquery-1.9.1.js and jQueryMobile 1.3.1 (Chrome 26/Windows 7) I cannot see why one of these 'click' events bound to #one1 fires and the other doesn't:
HTML:
<div data-role="page" id="one" data-theme="a">
<div data-role="header" data-position="inline">
<h1>One</h1>
</div>
<div data-role="content" data-theme="a">
[one]
two
three
</div>
</div>
JavaScript:
<script>
$(document).on( "mobileinit", function() {
$(document).on('click', '#one1', function(e){
console.log('firing');
});
$('#one1').on("click", function() {
console.log('not firing');
});
});
</script>
When I run it in JSFiddle both events fire when not wrapped in the "mobileinit" event:
http://jsfiddle.net/9NRwa/
What am I missing here?
Intro
First thing first, mobileinit event should not be used for event binding. While it CAN be used like that mobileinit was not created for that purpose. It was created for jQuery Mobile parameter auto-initialization, so it should not be used for event binding.
Correct way is to use proper page events like pageinit. For more information about page events take a look at my other answer that covers various jQuery Mobile page events and their difference towards usual jQuery document ready paradigm: jQuery Mobile: document ready vs page events.
Not let me answer this question. Events like click can be bound in a few different ways.
Lets look at examples you have used:
Various ways of event binding with jQuery
First example
$(document).on('click', '#one1', function(e){
console.log('firing');
});
This first example is something new that came to use first with now deprecated method live.
Basically it's an event delegation mechanism that allows you to bind event handlers not just to all existing instances of a given node type, but also to any future instances of a given node type (by "type" I mean a set of DOM nodes matched by a given jQuery selector). What I want to say here is, during the event binding that element don't need to exist in a DOM, basically this method works by binding event handlers to the document itself and then reacting to all the events that bubble up through the DOM. So it doesn't matter if element #one1 exist or not during the event binding. You can create it dynamically later and it will still work.
Second example
$('#one1').on("click", function() {
console.log('not firing');
});
This is on old way of event binding. It requires that event exists in the DOM before event can be bind. In your case you were trying to bind this click event to the element that didn't exist in a DOM at that point in time. It doesn't matter it was loaded after the binding process.
Working example
jsFiddle example: http://jsfiddle.net/Gajotres/QmNsa/
Take a look at this example. There you will see 5 different ways of click event binding in jQuery Mobile:
2 click event are bound in HEAD, before page is initialized into the DOM
2 click events are bound in HEAD in pagebeforeshow event, basically this is also a delegation of binding because event are bound when page is about to be shown and already inside a DOM
1 click event is bound in a BODY after all page content. Because all content is loaded inside a DOM at this point this click event will work.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('click', '#one1', function(e){
// This example will work because it was bind with event delegation process
console.log('Firing 1');
});
$('#one1').on("click", function() {
// This example will not work because event do not exist in this moment
console.log('Not firing');
});
$(document).on( "pagebeforeshow", function() {
// This example will work because it was bind with event delegation process
$(document).on('click', '#one1', function(e){
console.log('Firing 2');
});
// This example will work because element exist in a DOM during the pagebeforeshow event
$('#one1').on("click", function() {
console.log('Firing 3');
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
[one]
</div>
</div>
<script>
$('#one1').on("click", function() {
// This example will work because we are binding it when element is already loaded into the DOM
console.log('Firing 4');
});
</script>
</body>
</html>
Conclusion
Do not use mobileinit event for event binding, it will trigger before page is loaded into the DOM and only events bind with delegation will work.
Bind your events in a correct jQuery Mobile page events.
Usefull links regarding this topic:
jQuery Live() Method And Event Bubbling
While live method is deprecated on method should be used instead. In some benchmarks on method is 2x faster.
jQuery Mobile: document ready vs page events
Various jQuery Mobile page events
What does “event bubbling” mean?
As the docs stated:
Because the mobileinit event is triggered immediately, you'll need to
bind your event handler before jQuery Mobile is loaded
Currently, your mobileinit event are running after jQuery Mobile is loaded since jsFiddle will execute your javascript code after finish loaded any libraries you've chosen from the sidebar. To make it works, your structure should look like this:
<script src="jQuery library include first"></script>
<script>
$(document).on("mobileinit", function() {
// Your code here
});
</script>
<script src="jQuery Mobile include last"></script>