javascript - Focus on jQuery Mobile pageshow event not rendering -


i have multipage html. on page 1 link search page automatically focus text box search bar.

in current code, seems animations lagging behind pageshow event , don't technically appear until after event fires.

i have following javascript defined externally , in body , same result either

$(document).on('pageshow', '[data-role="page"]', function (event) {    $('#footerbagcount').text(mybag.totalqty);     switch ($(this).attr('id')) {        case "mpos":            break;        case "productlookup":            $("input:text:visible:first").focus();            $(document).enhancewithin();            break;        default:            console && console.log("default show!!");    };    console && console.log($(this).attr('id') + " - pageshow!!"); }); 

when runs textbox not focused. if go , search page again appears. appears if alert window called right after it.

i tried reproduce issue jsfiddle unsuccessful , shows desired effect. https://jsfiddle.net/polishvendetta/az3kfh5y/

are there known issues cause type of behavior?

edit able replicate issue , narrow down cause. have panels defined outside of page used external panels. looks having left panel defined works, having right side panel stops highlight displaying.

https://jsfiddle.net/polishvendetta/cfu8g331/

pageshow deprecated because it's native event. while pagecontainershow custom jqm event, emitted when page loaded , transition/animation had finished.

always use jqm events

i changed this

$(document).on('pageshow', '[data-role="page"]', function(event) {     switch ($(this).attr('id')) {         case "mpos":             break;         case "productlookup":             $("input:text:visible:first").focus();             break;         default:             console && console.log("default show!!");     };     console && console.log($(this).attr('id') + " - pageshow!!"); }); 

to this

$(document).on('pagecontainershow', function (event, data) {     var page = data.topage;     switch (page.prop('id')) {         case "mpos":             break;         case "productlookup":             $("input", page).focus();             break;         default:             console && console.log("default show!!");     };     console && console.log(page.prop('id') + " - page container show!!"); }); 

omar's jsfiddle - https://jsfiddle.net/cfu8g331/1/


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -