jQuery mobile: "swipeleft" and "swiperight" work only once - jquery-mobile

I have a page in which swiping to the left will bring up the next page (different url) and on the next page, swiping to the right will bring the previous page back.
The code works beautifully the first time. However, it doesn't work the next time around! If I manually refresh the page, it starts working again... so it must be an initialization problem.
I'm sure some of you must have faced this problem at some point. For those who have, I want to ask you - what is the correct way to implement such a feature?

This is what I finally used:
$(document).bind("pageinit", function(event) {
var count = 1;
var nextPage;
var prevPage;
//build 1st page of results
nextPage = "page-"+count+".html";
$("#showList").load(nextPage,function(){
$('#showList').trigger('create');
});
//detect swipeleft
$("#showList").bind("swipeleft",function(event) {
//verify if there is next page
if(count < 3) {
// go to next page
count++;
nextPage = "page-"+count+".html";
$("#showList").load(nextPage,function(){
alert(nextPage+" loaded");
$('#resultList').trigger('create');
});
} else {
//else notify user he has reached end of results
alert("Reached end of results");
}
});
//detect swiperight
$("#showList").bind("swiperight",function(event) {
//verify it's not 1st page
if(count > 1) {
count--;
prevPage = "page-"+count+".html";
//go to previous results page
$("#showList").load(prevPage,function(){
alert(prevPage+" loaded");
$('#showList').trigger('create');
});
} else {
//else notify user he's on 1st page
alert("You are on the 1st page");
}
});
});
Which essentially uses the 2 swipe events - swipeleft and swiperight - to update only the part of the list where the individual items appear, i.e. between <ul id ="showList"> and </ul>. The swipes work everytime now.
Part of the solution was derived from here: http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/
This suits my implementation but the flipside is that the URL remains the same through the pages.
I am still open to any other solution.

Related

How to handle browser back button when the user is logged in grails app?

I want that whenever any user is logged into my grails app and as soon as he presses the browser back button he should be automatically redirected to landing page(after login one).
The code I am using on back button is :
var oldURL = document.referrer;
alert(oldURL);
var url1="http://localhost:8080/interviewbuddy/";
var url2="http://localhost:8080/interviewbuddy/signup/signup";
var url3="http://localhost:8080/interviewbuddy/login/auth";
if(oldURL==url1||oldURL==url2||oldURL==url3){
window.location="http://localhost:8080/interviewbuddy/company/dashboard";
}
On my view gsp. Please help.
You can handle it with javascript or jquery specifically
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// redirect to landing page
window.location="http://localhost:8080/interviewbuddy/company/dashboard";
}
if (direction == 'forward') {
// do something else
}
});

Stop the back history, juste close panel [duplicate]

I have a jQuery mobile panel which slides in from the side, it works great.
But lets say you have a login page, that redirects to a main page with a panel. Now if the user opens the panel, and then clicks the back button, he expects the panel to close. But instead the browser navigates back to the login page.
I´ve tried adding something to the url:
window.location.hash = "panelOpen";
But that just messes up the jQuery mobile history state pattern. I´ve also tried to listen to the navigate event, and prevent it if a panel is open:
$(window).on('navigate', function (e, hans) {
var panels = $('[data-role="panel"].ui-panel-open');
if (panels&&panels.length>0) {
e.preventDefault();
e.stopPropagation();
$('#' + panels[0].id).panel('close');
return false;
}
});
This kind of works, except that the url is changed, and I cannot grab the event that changes the url. Furthermore, it also messes up the jQuery mobile history pattern.
So how does people achieve this expected 'app-like' behaviour with a jQuery mobile panel; open panel > history back > close panel. And thats it.
Thanks alot!
Updated
Instead of retrieving current URL from jQuery Mobile's history, It is safer to retrieve it from hashchange event event.originalEvent.newURL and then pass it to popstate event to be replaceState() with that URL.
Instead of listening to navigate, listen to popstate which fires before. The trick here is manipulate both browser's history and jQuery Mobile's history by replaceState() and reload same page without transition.
var newUrl;
$(window).on("hashchange", function (e) {
/* retrieve URL */
newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
var direction = e.historyState.direction == "back" ? true : false,
activePanel = $(".ui-panel-open").length > 0 ? true : false,
url = newUrl,
title = document.title;
if (direction && activePanel) {
$(".ui-panel-open").panel("close");
$(".ui-header .ui-btn-active").removeClass("ui-btn-active");
/* reload same page to maintain jQM's history */
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true
});
/* replace state to maintain browsers history */
window.history.replaceState({}, title, url);
/* prevent navigating into history */
return false;
}
});
This part is meant to maintain same transition used previously as transition is set to none when reloading same page.
$(document).on("pagebeforechange", function (e, data) {
if (data.options && data.options.allowSamePageTransition) {
data.options.transition = "none";
} else {
data.options.transition = $.mobile.defaultPageTransition;
}
});
Demo - Code
I am a little bit late on the party, but i had recently the same requirements and i would like to share how i did it. So, i extended the requirement in the original question to Panels, Popups and Pages:
...an expected 'app-like' behaviour, history back > close
whaterver is open. And thats it.
In .on("panelopen"), .on("popupafteropen") and .on("pagecontainershow") i simply add another entry to the window history, by using the HTML5 API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) (I believe there is no need to use the JQM navigate browser quirks for that):
window.history.pushState({}, window.document.title, window.location.href);
After that, i'm using more or less Omar's function to intercept the popstate event:
$(window).on("popstate", function (e) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pageOpen = (pageId != "page-home");
var panelOpen = $(".ui-panel-open").length > 0;
var popupOpen = $(".ui-popup-active").length > 0;
if(pageOpen) {
$.mobile.pageContainer.pagecontainer("change", "#page-home", {reverse: true});
return false;
}
if(panelOpen) {
$(".ui-panel-open").panel("close");
return false;
}
if(popupOpen) {
$(".ui-popup-active .ui-popup").popup("close")
return false;
}
});
As you see, the is just only one level to the home-page, but this can be easily extended by using JQM history implementation to get the previous page:
var activeId = $.mobile.navigate.history.activeIndex;
var jqmHistory = $.mobile.navigate.history.stack; // array of pages
and use pagecontainer to change to the active entry - 1.
As last note, this works well also by completely disabling the built-in JQM Ajax navigation system:
/* Completely disable navigation for mobile app */
$.mobile.ajaxEnabled = false;
$.mobile.loadingMessage = false;
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.popup.prototype.options.history = false;
(Tested in Browser, on real Android and iOS devices)

Stop the back history, just close popup

When I click the back button on the browser, my popup closes but the listener events brought me back to the previous page, I want in my function an element that closes the popup without me go back. While keeping the history listener to other pages (don't stop in the whole of the application)
$(document).on("pageshow", "#member", function (){
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
$("#mypopup").popup("close");
}
});
});
I try with
$(document).bind("mobileinit", function () {
$.mobile.hashListeningEnabled = false;
});
But don't working

Back button handler in jQuery Mobile (Android) PhoneGap

Is there any way to handle back button (device backbutton) as default functionality to move back page? I need to implement the same functionality on back button goes to previous page. If there is no previous page (first page) it exit the application. Is this possible in PhoneGap?
I also need to pop page before going to push another page is this posible in jQuery?
Checking window.location.length would be the easiest way to determine if you're on the first page, but this isn't available in Phonegap.
But since you're using JQM, you can either use the navigate event as Omar suggests or could manually count the number of pages shown and the number of pages gone back (same thing) and use this to determine if the first page is being shown and whether to exit the app. Something like this would work:
var pageHistoryCount = 0;
var goingBack = false;
$(document).bind("pageshow", function(e, data) {
if (goingBack) {
goingBack = false;
} else {
pageHistoryCount++;
console.log("Showing page #"+pageHistoryCount);
}
});
function exitApp() {
console.log("Exiting app");
navigator.app.exitApp();
}
function onPressBack(e) {
e.preventDefault();
if(pageHistoryCount > 0) pageHistoryCount--;
if (pageHistoryCount == 0) {
navigator.notification.confirm("Are you sure you want to quit?", function(result){
if(result == 2){
exitApp();
}else{
pageHistoryCount++;
}
}, 'Quit My App', 'Cancel,Ok');
} else {
goingBack = true;
console.log("Going back to page #"+pageHistoryCount);
window.history.back();
}
}
function deviceready() {
$(document).bind('backbutton', onPressBack);
}
$(document).bind('deviceready', deviceready);
As for the second part of your question:
Secondly i need to pop page before going to push another page is this
posible in jquery ?
It's not clear what you're asking here. Do you mean you want to show some kind of popup content like a dialog between every page change? Please clarify then I can help you :-)

checkboxradio undefined

I'm developing an MVC4 mobile app using Visual Studio 2012 with jQuery Mobile. I need to remember the state of checkboxes and radio buttons so I store their value in a cookie. When I come back to the page in the pageinit event I set the values but the controls never update visually. Using Firebug with the page rendering as mobile I can see that the values changed correctly. I've tried calling checkboxradio('refresh') on the element like this:
$('#btnCompany').prop('checked', true)checkboxradio('refresh');
but I always get an error saying checkboxradio is undefined and not supported. I know the control is a radio button. To try and work around the problem I extracted the code in jQuery Mobile to refresh a radio button and checkbox which I call and again I can clearly see in Firebug that not only is the input checked correctly but the label classes have changed appropriately. However, visually nothing changes, they look like they did originally. Am I missing something? Why am I getting an error saying checkboxradio is not supported even when I call this in the pageinit event:
$("input[type='radio']").checkboxradio("refresh");
I've tried refreshing by hiding then showing the containing div but that failed. Nothing I've tried refreshes the controls visually. Any and all help would be greatly appreciated!!!
Here are the functions I'm calling to refresh the page bypassing checkboxradio. Here is the function I call to try and work around the problem:
function SetSearchFormState() {
if ($.cookie('cmdSearchForm') != null) {
//$('#searchParamsDiv').hide();
var formData = JSON.parse($.cookie('cmdSearchForm'));
$('#SearchText').val(formData.SearchText);
// Set all search buttons to not selected.
$('.searchBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate search button selected.
$('#hidSearch').val(formData.hidSearch);
switch (formData.hidSearch) {
case 'Opportunity':
$('#btnOpportunity').prop('checked', true);
RefreshCheckboxRadio($('#btnOpportunity'), true);
break;
case 'Company':
$('#btnCompany').prop('checked', true);
RefreshCheckboxRadio($('#btnCompany'), true);
break;
case 'Contact':
$('#btnContact').prop('checked', true);
RefreshCheckboxRadio($('#btnContact'), true);
break;
}
// Set all status buttons to not selected.
$('.statusBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate status button selected.
$('#hidStatus').val(formData.hidStatus);
switch (formData.hidStatus) {
case 'Lead':
$('#btnLead').prop('checked', true);
RefreshCheckboxRadio($('#btnLead'), true);
break;
case 'Prospect':
$('#btnProspect').prop('checked', true);
RefreshCheckboxRadio($('#btnProspect'), true);
break;
case 'Customer':
$('#btnCustomer').prop('checked', true);
RefreshCheckboxRadio($('#btnCustomer'), true);
break;
}
// Set the appropriate include button selected.
$('#hidAllUsers').val(formData.hidAllUsers);
$('#btnAllUsers').prop('checked', false);
RefreshCheckboxRadio($('#btnAllUsers'), false);
if (formData.hidAllUsers == 'True') {
$('#btnAllUsers').prop('checked', true);
RefreshCheckboxRadio($('#btnAllUsers'), true);
}
$('#hidDead').val(formData.hidDead);
$('#btnDead').prop('checked', false);
RefreshCheckboxRadio($('#btnDead'), false);
if (formData.hidDead == 'True') {
$('#btnDead').prop('checked', true);
RefreshCheckboxRadio($('#btnDead'), true);
}
//$('#searchParamsDiv').show();
$("input[type='radio']").checkboxradio("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
}
};
And here is the function that I extracted out of jQuery mobile's checkboxradio refresh method:
function RefreshCheckboxRadio(control, value) {
if ($(control).is(':radio')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-radio-on ui-button-active').addClass('ui-radio-off');
$(icon).removeClass('ui-icon-radio-on').addClass('ui-icon-radio-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-radio-on ui-button-active').removeClass('ui-radio-off');
$(icon).addClass('ui-icon-radio-on').removeClass('ui-icon-radio-off');
}
//$(parent).show();
} else if ($(control).is(':checkbox')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-checkbox-on ui-button-active').addClass('ui-checkbox-off');
$(icon).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-checkbox-on ui-button-active').removeClass('ui-checkbox-off');
$(icon).addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');
}
// $(parent).show();
}
};
After this code is run I can see the values are correct and exactly as they would be if checkboxradio('refresh') had been called. So even though I can't get checkboxradio to work, performing the work manually should work and in fact does when I view the changes in Firebug yet the controls still don't change their appearance.
After much experimentation I finally threw out this code, disabled Ajax in jQuery Mobile, then handled all of the Ajax manually. I could write a book about what I learned about developing jQuery Mobile apps with MVC4 and probably help many folks out there but alas I don't have the time nor do I get paid for doing so, sorry. I can only hope that someday somebody documents how to do things the right way so there's a single source people can turn to instead of having to spend hours searching for bits and pieces here and there.

Resources