I am migrating up from jquerymobile 1.2 to 1.4.5
the content for each of my pages on my app commences with the following syntax,
$("#DemoAccountRegistrationPage").live("pageshow", function() {
I have been able to figure out i need to transition the .live to .on so the above becomes each page reference
$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {
however i realise that the above format is still not compliant for 1.4.5 hence why the content is not loading
can someone please provide me the correct syntax to be able to change
$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {
to the correct syntax for compliance with 1.4.5
I have read over the jquery docs but cannot fully understand what the correct syntax needs to be (very new to jquery mobile)
The jQuery docs are not at all very clear on this, but in a nutshell, pageshow was deprecated in JQM 1.4.0 in favour of using pagecontainershow on the pagecontainer widget.
I was able to get something working by adding the pagecontainershow listener to the document, then inspecting the arguments to figure out if it matched the page I wanted; something like this:
$(document).on('pagecontainershow', function(event, ui) {
if(ui.toPage[0].id == "my_page_id"){
// do some stuff for my_page
}
});
I tried to make it a bit more reusable, like this:
function on_pagecontainershow(page_id, fn){
$(document).on('pagecontainershow', function(event, ui) {
if(ui.toPage[0].id == page_id){
fn();
}
});
}
on_pagecontainershow('test_page', function(){
alert('pagecontainershow triggered');
});
Syntaxes I tried and failed to get working:
$(document).on('pagecontainershow', '#test_page', function(event, ui) {
alert("I don't get called (1)");
});
$(document).delegate("#test_page", "pagecontainershow", function() {
alert("I don't get called (2)");
});
$("#test_page").on("pagecontainershow", function() {
alert("I don't get called (3)");
});
You can try it out in this fiddle.
This works for me, as i'm using it in one of my projects:
$(document).on("pagecontainershow", function(e, ui) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
if (typeof ui.toPage == "object") {
/* manipulate page navigating to */
switch(pageId) {
case "page-one":
//do stuff
break;
case "page-two":
// do other stuff
break;
}
}
});
Related
I have this code:
$('.selector').on({
touchstart: function (e) {
e.preventDefault();
alert(3);
e.stopPropagation();
},
tap: function (e) {
e.preventDefault();
alert(4);
e.stopPropagation();
}
});
Only touchstart is triggered. Can anybody explain why?
P.S. : This is how I include the script for jQuery mobile :
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
EDIT:
I want to introduce a hover functionality on one of my div and I thought that with tap event it will be like clicking and with touchstart like hover.
$('.selector').on('tap swipe', function (e) {
e.preventDefault();
if(e.type == 'swipe') {
alert(1);
}
if(e.type == 'tap') {
alert(2);
}
e.stopPropagation();
});
$('.selector .sel1').on('tap swipe', function (e) {
e.preventDefault();
if(e.type == 'swipe') {
alert(3);
}
if(e.type == 'tap') {
alert(4);
}
e.stopPropagation();
});
With this code the swipe event on my div works fine, but for inside element I can't reproduce the swipe event, only tap gets triggered. I really can't figure out why.
Use syntax like this:
$('.selector').on("touchstart tap", function(e){
e.preventDefault();
if(e.type == "touchstart"){
alert(3);
}
if(e.type == "tap"){
alert(4);
}
e.stopPropagation();
});
Touchstart seems to no longer be offered as a native event within jQuery Mobile ver. 1.4.5 Perhaps you can use "tap" and "swipe" (or "swipeleft" / "swiperight") to achieve your goals? Its not entirely clear on what you are creating.
Note: one thing that you can do is easily customize the native jQuery Mobile functions for swipe. See details at http://api.jquerymobile.com/swipe/
Before you make the .on("swipe"...) binding you can change the test values used by jQuery swipe. Its as easy as
$.event.special.swipe.horizontalDistanceThreshold = 100; // in lieu of 30px
You can verify that data setup via alerts or console.log(). Perhaps this will work for you? hmmm.. by working on vertical distance threshold, you could in essence temporarily define "swipe" to function as a "swipe-up", then you'd have swipeleft, swiperight and swipeup to play with.
I am using Jquery Mobile 1.4 and I would like to create a button that sends the user to another page, and opens the panel on this new page once landed :
I am trying this :
$(document).on('pagecreate','#faq-page', function(){
$('#faqcontactus').on("tap", function() {
$( "body" ).pagecontainer( "change", "#welcome-page", { transition: "fade" });
$( "body" ).pagecontainer( "getActivePage" ).find('#mypanel').panel("open");
});
});
which goes to the page, opens the panel, but closes it instantly.
Can you help ?
Thanks
You can't do it after you initiate page change process. That process is asynchronous and pane open will not wait for this function to end. What you need to do is wait for next page to became visible, then you should trigger panel.
Something like this:
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
var activePageId = activePage .attr('id')
if(activePageId === 'welcome-page') {
activePage.find('#mypanel').panel("open");
}
});
You should wait until page is fully loaded before you open the panel, i.e. use pagecontainershow.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activePage[0].id == "welcome-page") {
$(".ui-panel", activePage).panel("open");
}
});
I'm trying to get a longtap to work on a utfgrid using leaflet/mapbox.
Normally I'd think jQueryMobiles "taphold" or leaflets "contextmenu" would work (and they do... on the map) but nothing when trying to use it with the utf gridLayer.
I currently use this for a simple tap/click on the grid which works fine.
gridlayer.on('click', function (e) {
console.log(e.data);
});
But what I really want to do is this.
gridlayer.on("contextmenu", function(e){
//do something else
});
or
gridlayer.on("taphold", function(e){
//do something else
});
I have a page that is created completely using Knockout. In one of the templates, clicking on a link will display a JQuery Datepicker control to select a date. Upon selecting the date, a function executes using the selected date and the Datepicker closes. That much works just fine.
It can take several seconds from when someone selects a date until the Datepicker closes. This is due to a function that is called (LoadAppointmentTimeSlots) which needs to run synchronously and can take a while to do what it does. To address this, I would like a DIV to appear that provides feedback to the user that the system is working ("#loading").
THE PROBLEM is that the DIV does not appear until after the LoadAppointmentTimeSlots function executes (by which time the DIV gets hidden again). I have experimented with setTimeout in several ways, but nothing has worked.
Below is the "offending" code:
var SchedulingViewModel = function () {
var self = this;
...
self.Date_OnClick = function () {
var selectedDate;
$("#calendarPopup").append('<div id="datepicker" />');
$("#datepicker").datepicker({
dateformat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
setDate: new Date(),
minDate: 0,
maxDate: self.SelectedRFVInterval() - 1,
onSelect: function (datetext, inst) {
selectedDate = datetext;
$("#loading").show();
self.LoadAppointmentTimeSlots(datetext); // function within view model that uses $AJAX in sync mode to return time slot data
$("#loading").hide();
$('#calendarPopup').dialog('close');
}
});
};
...
}
The difficulty you are running into is because show() is executed asynchronously, and since javascript is executed in a single thread, that means they have to wait until all synchronous code (such as LoadAppointmentTimeSlots) is done.
To get your desired behaviour, put everything after the show() call into the callback for the show command. That way LoadAppointmentTimeSlots won't execute until the show() call is done. Here is how:
// ... other code
$("#loading").show(function() {
self.LoadAppointmentTimeSlots(datetext);
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
However, it might be better to change your ajax call in LoadAppointmentTimeSlots to be asynchronous and move the hide() and dialog('close') calls to the callback of the ajax call. This allows javascript to keep doing other things while you are waiting for LoadAppointmentTimeSlots to finish. That might look more like this:
// ... other code
$("#loading").show()
self.LoadAppointmentTimeSlots(datetext, function() {
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
// ... more code
function LoadAppointmentTimeSlots(datetext, alwaysCallback) {
// Prepare request details
$.ajax( "/myendpoint?param=foo" )
.done(function(data) { alert("success"); }) // do something with data
.fail(function() { alert("error"); })
.always(alwaysCallback); // called on both success and failure of ajax call
}
I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone's back button:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
$.mobile.changePage("#homepage", "slideup");
}
This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?
Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it.
Here's how I do it:
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
/*
Event preventDefault/stopPropagation not required as adding backbutton
listener itself override the default behaviour. Refer below PhoneGap link.
*/
//e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
For further information, here you can find the related documentation with a full example: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown()
{
navigator.app.exitApp();
}
Thank you spader.
You would need to keep track of when the homepage is being displayed. When you know you are on the homepage call:
navigator.app.exitApp();
If you don't want to use jQuery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on #Spadar Shut answer, as on following code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if(document.getElementById('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
}
Through this way, don't need to download Jquery Mobile gibberish only for this purpose. Also, activePage is deprecated as of JQuery mobile 1.4.0 and will be removed from 1.5.0. (Use the getActivePage() method from the pagecontainer widget instead)