I don't really understand what they're saying about pageshow on the jQuery Mobile site:
The triggering of this event is deprecated as of jQuery Mobile 1.4.0.
It will no longer be triggered in 1.6.0. The replacement for pageshow
is the pagecontainer widget's pagecontainershow event. In jQuery
Mobile 1.4.0, the two events are identical except for their name and
the fact that pagecontainershow is triggered on the pagecontainer,
whereas pageshow is triggered on the page.
I don't think it's a matter of changing 'pageshow' to 'pagecontainershow'. I think it's a different selector, isn't it?
You use the $(":mobile-pagecontainer") or $(document) or $("body") selectors
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var newPageID = ui.toPage.prop("id");
});
API Doc: http://api.jquerymobile.com/pagecontainer/#event-show
Then to see which page is being shown check the ui.toPage jQuery object.
Related
In my multipage jqm document there is a page with the id #internal. At some point I do
$('#internal').remove();
The page is removed but
$('body').on('pagecontainerremove',function(e,ui){console.log(ui.toPage);console.log('page removed');})
does not fire. Googling for pagecontainerremove and experimenting with various ways of removing the page has not yielded anything useful.
The remove events pageremove and its' "successor" pagecontainerremove are fired on external pages in Single Page Model. jQuery Mobile removes external pages from DOM upon navigating away off them. By default, jQuery Mobile doesn't cache external pages and binds bindRemove to remove them. However, if an external page is cached data-dom-cache="true", the remove event won't be attached to it to remove it from DOM.
Although pageremove is replaced by pagecontainerremove, the latter doesn't fire and it is definitely a bug in jQuery Mobile 1.4.
/* doesn't fire */
$(document).on("pagecontainerremove", function (e) {
console.log("pagecontainer event: " + e.type);
});
/* does fire */
$(document).on("pageremove", function (e) {
console.log("page event: " + e.type);
});
Demo
Nevertheless, it is possible to use bindRemove in Multi-Page Model to let jQuery Mobile removes it once hidden. First, add data-external-page="true" to page div that you want to be removed by jQuery Mobile, and then flag it for removal $("#pageID").page("bindRemove").
<div data-role="page" id="pageID" data-external-page="true">
$(document).on("pagecreate", "#pageID", function (e) {
$(e.target).page("bindRemove");
});
Demo
I'm using jquery mobile v1.3.2
For some reasons I want to set an global pagechange event to prepare all of my pages :
var Front = {
initDom : function($dom) {
// here i can bind some events in my page
$(".someButton",$dom).bind("tap",function(){
alert("some actions");
});
// etc.....
});
}
$(document).on("pagechange", function(event, data) {
Front.initDom($(data.toPage));
});
This works well. But it is triggered at each page change. And some times it will init the same event twice and that will lead to some bugs.
Now i have tested to do it with the event pageinit or pagecreate but both are triggered before the page is ready and $("ui-page-active"); is empty.
I have though about some setTimeout, but that's definitively a bad idea.
I have also though to init everything at the first pageinit and unbind it. But ajax called page wont be bound.
It there some good workarround ?
You can use pageinit and then get the id of the page from the event target object:
$(document).on("pageinit", function(e){
alert(e.target.id);
});
DEMO
Is there a way to replace all click event by vclick event in jQuery mobile?
The only solution I've found so far is to register a vclick event as below
$('a').bind("vclick", function (ev) {
// Do Some stuff
ev.preventDefault();
});
The problem is that this solution doesn't prevent jQuery mobile click event to fire so clicks are triggered twice
For some reason, I got the following to work:
$('a').bind('vclick click',function(e){
e.preventDefault();
//do some stuff//
})
Without the e.preventDefault() the event fires twice. With it, it only fires once (but it does fire)
This is similar to what you stated, but may be more all encompassing.
$("#elementId").bind('vclick',function(event){
event.preventDefault();
//your code..
});
this is working properly.
I am trying to understand the following jQuery Mobile example.
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
What is #aboutPage in this context? What is the object pageinit is binding to?
aboutPage should be the id of the page.(i.e.div with data-role="page").live() attaches the funcion you have defined which contains thealert to the pageinit event of aboutPage.pageinit is triggered on a page when the page is initialized.
So in short What your code does is
it will execute the alert statement when aboutPage is initialized
The page might be initialized even if it is not in view.So even before you go to that page,the pageinit of the div will be triggered.If you are loading another html file as the new page pageinit for that page will be triggered only when you load that page into view.So,in your case if you want to do something when your div comes into view,you can try the pagebeforeshow and pageshow.pagebeforeshow will be triggered on the new page before animation starts and pageshow after animation is over.
Is there a addon somewhere that adds mousewheel support to the jQuery UI datepicker? (So that using the mousewheel over the calendar causes the month to advance/go back.)
The changelog seems to indicate that mousewheel support was added in 1.7, but it looks like that changeset actually had nothing to do with the datepicker. A cursory search of 1.8 indicates there's no built-in mousewheel support.
I know Keith Wood's datepicker supports the mousewheel, but I'm using this timepicker, which depends on jQuery UI's datepicker.
It can be easily added by adding the following code to your ready function. It uses the jQuery mousewheel extension and adds a live event listener for mousewheel events on jQuery UI datepicker divs. If one is detected, it triggers the click event on the prev/next month button.
Live demo: http://jsfiddle.net/PSFgY/
$('.ui-datepicker').live("mousewheel", function(event, delta){
if(delta < 0){
$(this).find('.ui-datepicker-next').click();
} else {
$(this).find('.ui-datepicker-prev').click();
}
event.preventDefault();
event.stopPropagation();
});
A small update:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
Also I had to use event.originalEvent.wheelDelta to get the delta.
$(document).on('mousewheel', '.ui-datepicker', function (event) {
var sel = event.originalEvent.wheelDelta < 0 ? '.ui-datepicker-next' : '.ui-datepicker-prev';
$(this).find(sel).click();
event.preventDefault();
event.stopPropagation();
});
Here is another way to handle the problem especially when minimum and maximum dates are set:
$('.ui-datepicker').bind("mousewheel", function(e){
var delta = e.originalEvent.wheelDelta;
if(delta < 0){
$(this).find('.ui-datepicker-next').click();
} else {
$(this).find('.ui-datepicker-prev').click();
}
e.preventDefault();
});