Develop Reference

.focus() after reloading page with jQuery in phoneGap

I'm trying to solve an issue with a phonegap app for Android.
I have a function like this one on a dinamic page
$(objLid).change(
function (e){
//Save data for reload
_prototype.saveFormData();
//reload call
reloadPage();
//first attempt to have the focus on the right obj
$(objLid).focus();
}
);
That's how it work:
The button have type "select-one" after the user select one of the element i save all the previous item on text field, then i call the reload function that add other field on the page.
On iOs without the .focus() call i have no problem but on Android after the reload the application automatically makes a scroll at the top of the page. I've tried:
$mobile.silentscroll(Y) //with Y as a given Y position
But it work as the focus, after the reload Android makes a scroll at the top. The same with setTimout hoping for a delayed effect but unsuccessfully:
setTimeout(function() {
$(objLid).focus();
}, 1000 );
There's an hack to this annoying "scroll"?
Thanks

Update one page with jQuery, in single html file

I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0

You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo

Android web view "back" button to load previously loaded div

I will try to explain this as clearly as possible. I have an android app using web view to basically load a webpage as my app. I have everything working great, however the back button seems to be an issue. I have set this page up all on one html page, it will load in a div when certain buttons are clicked to give the feel of a new page without actually having one. I basically want the back button (on the android tablet or smartphone) to load the previously loaded div, but I have no idea where to start with this. Here is what the content switching jquery looks like -
function contentSwitcher(settings){
var settings = {
contentClass : '.contentToLoad',
navigationId : '#sideMenu',
servFront : '#clickHomeHome'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show("slow");
});
}
contentSwitcher();
});
note: I've cropped out a bunch of it just to show how it works on a basic level.
Does anyone have any suggestions as to where to begin. I'd just like the back button function to be able to maybe check a started previous div name stored somewhere and load that.
thanks!

You can try using the History API. There are numerous tutorials on the web e.g. this one is quite good:
http://diveintohtml5.info/history.html
Basically this is how it works. When the user clicks the link for the div to show you push the state to the history stack.
history.pushState({<object with any information about state>}, pageTitle, newUrl);
This will push the state to the history stack meaning that when the user presses the back button on any modern browser like webkit it will take that state into consideration. When back action is taken it will then pop the state from the history stack. This action you have to listen to and handle in any way you see fit:
window.addEventListener("popstate", function(event) {
// event object contains the information from the pushed state
// do whatever needed to load the previous page here
});
The History API requires you to structure your code in a certain way for it to work well. For this I would recommend to use some existing framework that handle the back events for you e.g. Backbone.js. Hope this helps.

Android phonegap - click event is fired on the next screen

I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.

There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});

Disable touch events in phonegap (xcode iOS)

I am having the most annoying situation. Ok, here goes. I am using a javascript based sliding menu for a mobile app. The "slider" works just like Facebook mobile, where you can click the button to show the menu on the left and click it again to close the menu. As an alternative, if you touch the still visible part of the page when the menu is showing it will also close. And that's it.
Problem: Note that I'm using Phonegap for this app. When I run the iOS simulator in Xcode all works fine EXCEPT if you swipeleft, for example, the page will move. I want to disable the swipe event all together. I have tried preventDefault, return false etc. Nothing seems to work. Again, my only goal is to disable touch events because for this app, I simply don't need them. Please see the javascript code for the menu show/hide below.
Thanks is advance. All is appreciated.
$(function(){
var menuStatus;
// Show menu
$("a.showMenu").click(function(){
$('#menu').show();
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "170px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
// Menu behaviour
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});

You could over-ride the $.event.special.swipe.horizontalDistanceThreshold to a larger value and prevent swipes on your page from triggering the swipe event.
Refer to Touch Events -> Swipe