Develop Reference

How to create pop up in phone gap

Helo,
Is there a possibility to click on button and show a popupover and inside it there is two buttons. When i click on each of them , i have an alert.
If there isn't a possibility with a popupover is there a possibilty of any other popup window?
My Android application is developped in phonegap
Thanks a lot

Take a look at the cordova dialogue api.
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md
I think you are looking for the navigator.notification.confirm feature.
Using this feature you can display a popup with multiple options for the user to tap on.
The index of the button the user taps on is returned to the confirmCallback, so you can handle the user input.

navigator.notification.confirm(message, onConfirm, [button1], [button2]);
function onConfirm(buttonIndex) {
alert('You selected button ' + buttonIndex);
}
perform operations based on buttonIndex.

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.

The click event is made but it isn't showed in the screen

I'm making a mobile application with phonegap and jquery mobile. Everytime I select one of the menu elements I call to a WS that gives me an answer that I show in the screen. It works perfectly up to there.
As I want to have a better view so I use the code trigger ('create'). (http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html but insted of refresh I have to make an create)
var listadohtml = '<div data-role="fieldcontain"><fieldset data-role="controlgroup">';
for (var i=0;i<resultado.length;i++){
var item = '';
var id = resultado[i]['id'];
item += '<input type="checkbox" name="checkbox-'+id+'" id="checkbox-'+id+'" class="custom" />';
item += '<label for="checkbox-'+id+'">'+resultado[i]["title"]+'</label>';
listadohtml += item;
}
listadohtml += '</fieldset></div>';
$('#listaPreguntas').html(listadohtml).trigger('create');
Inmediatly after that I associate an event:
$("#listaPreguntas input[type='checkbox']").bind( "click", function(event, ui) {... some code ...});
It shows everything fine, but the problem is that sometimes (not always, that's the problem) when I click a checkbox the green tick is not shown but the event change is made. When it happens I can see, by clicking in other part of the screen, that I have clicked before because it refreshes and shows the tick.
The conclussions I have
It is not the AVD because im making all the tests in my mobile phone with android 4.0.
It appears that its something of the code that includes jquery mobile when I use de trigger.
I think it is not loading time because I can wait for years and it can happens.
As you can see its not a "logic" problem but a usability one.
Thanks in advance!

For checkbox and radio, use change event not click. And keep in mind that attaching events to dynamic elements is different, I have updated my answer accordingly.
Demo
$(document).on('change', '[type=checkbox]', function () {
// code here
});

If the event click fires every time as expected then try to set the check box checked/unchecked classes using addClass and removeClass in your code pragmatically rather than relying on the JQM.

Popup menu scroll with the page in jquerymobile

I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same.
Thanks in advance.

There's an easy fix for this problem. Just prevent page scrolling when popup is active.
Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/
For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.
And this javascript will work on every possible popup:
$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','auto');
});

For me this method didn't work, it works on browser but not in Phone Gap application.
So I resolve it in this way:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!

if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.
popupafteropen: function (e) {
$('html').css('overflow', 'hidden');
},
popupafterclose: function (e) {
$('html').css('overflow', 'auto');
}

android browser timers when keyboard is open

I have run into this issue where asynchronous functions do not execute when the soft keyboard is open in the android browser.
For example:
<input type='text' id='foo'/>
....
document.getElementById("foo").addEventListener("keyup", function() {
window.setTimeout(function() { alert("1"); }, 20);
}, false);
You will never see the alert as long as you remain focused on the text input. This is true for xhr callbacks as well. If you attempt to make an ajax request, the request is sent, but the oncomplete callback is never fired until after you type another character in the textbox.
Does anyone know a workaround? You can see that Google obviously has a working example with their search suggestions, though I've not yet been able to figure out what exactly their solution is yet by looking at the minified/obfuscated source.
Any insight appreciated, Thanks

Using the newest jquery lib in the style of
$("#inputnum").keyup(function(e){
if (e.keyCode != '13') {
$("#outputarea").slideUp('slow');
};
});
causes the item selected with "#outputarea" to be slid up every time - as soon as I type any letter on the software keyboard or a hardware keyboard. Might want to give the jquery lib a shot? Cross-browser compatibility is the main reason I keep going back to it.