Focus html page or element from a webview with talckback - android

I have an hybrid app developed with ionic 1.x. When the app loads I am forcing the webview to take the focus from native side with the hope that after some initialization request a survey dialog appear and take the focus it self(When dialog appear I am forcing it to take focus). I am trying to make it work with talkback
The problem is that when you load the app from scratch the dialog is not focused so it is not read, after navigate through the app and come back to the original page then in works as expected, looks like as the user is in fact inside the page things works ok.
Is there any workaround or strategy to solve this particular situation?
Thanks in advance

I don't know if it helps you,
but we use it to focus on specific elements in the web view.
it works in android and ios,
but in android, before every element it read webview.
(if you found a solution for it please let me know)
function putFocus(elementForFocus) {
var $element = $(elementForFocus);
var focusInterval = 10; // ms, time between function calls
var focusTotalRepetitions = 10; // number of repetitions
$element.attr('tabindex', '0');
$element.blur();
var focusRepetitions = 0;
var interval = window.setTimeout(function () {
$element.focus();
}, focusInterval);
};

Related

JQuery Mobile swipe event only firing every other swipe

I have set up a swipeleft event in my app to move between fields of a form. All of the fields are dynamically generated, so I'm not swapping between pages, I'm clearing and re-generating all the DOM elements. The problem is the swipe event only fires every other time I swipe on the page or if I touch or tap anything on the page.
Here's the code that sets up the events:
$(document).delegate("#scorePage", "pageshow", function() {
$.event.special.swipe.scrollSupressionThreshold = 10;
$.event.special.swipe.horizontalDistanceThreshold = 30;
$.event.special.swipe.durationThreshold = 500;
$.event.special.swipe.verticalDistanceThreshold = 75;
$('#divFoo').on("swipeleft", swipeLeftHandler);
$('#divFoo').on("swiperight", swipeRightHandler);
tableCreate(traits[0].keyboardID);
});
For context, tableCreate is putting a dynamically generated table into divFoo that contains information a user can pick from. Here's the event code itself:
function swipeLeftHandler() {
$("#divFoo").empty();
traitIndex++;
tableCreate(traits[traitIndex].keyboardID);
}
Why is my swipe event only firing every other time there is a swipe on the page?
Primarily testing on Android right now, if that makes a difference.
Edit I'm using JQuery Mobile version 1.4.4
I figured out a way around this problem by simply rolling my own implementation of these events. There's some sample code on how to do something similar here:
https://snipt.net/blackdynamo/swipe-up-and-down-support-for-jquery-mobile/
If anyone else uses this code to fix my same problem, make sure to be aware that the article is implementing swipeup and swipedown so you will have to adapt it. In the end, I'm not entirely sure about the differences between this code and the actual implementations of swipeleft and swiperight, but this works consistently so I'm cutting my losses and going with it.

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.

localStorage with Jquery Mobile works only 1 time on a new Android system

I am using the localstorage option to set a variable for using it in another page.The platform is Android
Just to simulate the problem, i just created 2 simple JQM pages and set the variable in page 1 and use it in page 2. That works fine for the first time. When i'm going back to page 1 and set a new value for the variable, page 2 tells me that it is the previous value(!). I'm a little bit lost how to use it. Can someone give me a clue how to manage this? The weird thing is that on an old Android version (like 2.3.3) it works fine, but on a new one (like > 4) it fails. I think it has something to do with ready() event?
Page 1 - Main page:
$(document).ready(function () {
$('#Klant_Lijst').delegate('li', 'click', function () { var x = $(this).data('nummer'); localStorage.setItem("Nummer", x);});
});
Page 2 - sub page
$(document).ready(function () {
GetFustInfoKlant(localStorage.getItem('Nummer'));
});
I hope someone can give me an hint in a direction. Thanks!
Please dont use ready() method, use JQM page events like pageshow, pagecreate, pagebeforeshow, etc..

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.

jQuery.mobile popup immediately hides after showing

I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.

Categories

Resources