CODEWITHSUNDEEP
javascriptjquerygoogle-chromejquery-mobile
ephbaum
ephbaum

Reputation: 362

jQuery Mobile Dialog Disappears immediately in Chrome

I've looked at this for a while and feel like I'm missing something obvious...

I am using jQuery mobile to popup a dialog for users of a web app, I am using user agent sniffing to provide a quick dialog to direct the user on how to install the app if they choose based on their platform.

While it might not seem to matter, I want to make sure that I cover my bases as well as possible. The last if statement applies to browsers less than 600 pixels wide that doesn't have one of the previous ua strings... so, if you reduce down a desktop install of Chrome it will trigger that pop-up. However, in Chrome it appears and then immediately disappears. I cannot see any errors thrown and since I don't see it happening in Firefox, I'm not seeing what's happening.

I have two questions:

1 - Does anyone know what's happening here? I've tried with and without returning false, which I don't think should matter, but just to test escape.

2 - Does anyone have a suggestion on doing this cleaner. Since I'm testing the ua, I was considering trying to run this as a switch statement, but I'm not sure if testing that would work correctly... but I feel like I'm not wrapping my head around this the right way. 

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isWinPhone = ua.indexOf("windows phone") > -1;
var isBlackberry = ua.indexOf("blackberry") > -1;
var isbbTen = ua.indexOf("bb10") > -1;
var current_width = $(window).width();
$( '#home' ).live( 'pageinit',function(event){
if(isAndroid) {
$.mobile.changePage( '#android' , { transition:"pop", role:"dialog" });
return false;
};
if(isWinPhone) {
$.mobile.changePage( '#winPhone' , { transition:"pop", role:"dialog" });
return false;
};
if(isBlackberry) {
$.mobile.changePage( '#Blackberry' , { transition:"pop", role:"dialog" });
return false;
};
if(isbbTen) {
$.mobile.changePage( '#bbTen' , { transition:"pop", role:"dialog" });
return false;
};
if(current_width < 599 && !isAndroid && !isWinPhone && !isBlackberry && !isbbTen){
$.mobile.changePage( '#generic' , { transition:"pop", role:"dialog" });
return false;
};
});

You can see the same thing happen here: http://jsfiddle.net/fskirschbaum/2YTwE/1/ IF you view it in Chrome.

I've tried a few other parameters, but without understanding why it's happening in the first place, I'm at a loss as to where to start.

Upvotes: 1

Views: 3859

Answers (3)

Norbert Ryan
Norbert Ryan

Reputation: 81

I too had a disappearing dialog problem - turns out to have been related to earlier attempt to get rid of "flickering" - a SO answer suggested that the following would stop the flickering (it didn't):

.ui-page { -webkit-backface-visibility: hidden; }

When I removed this line of css, the dialog worked ok.

Upvotes: 2

Gene
Gene

Reputation: 83

I had this problem, too, if I had a popup open conditionally on loading the page, in the Chrome browser (not in FF) The fix turned out to be updating the library to jqm 1.3.1.

That's it. Tested in FF and Chrome.

Note that 1.3.0b -- which is available as an option on jsfiddle.com, doesn't work. 1.3.1 does.

Then bind to the pageshow event:

jQuery(document).on ( 'pageshow', function(event) {
    $( '#popupID' ).popup('open'); 
});

Upvotes: 0

peterm
peterm

Reputation: 92805

  1. If you link proper jQuery and jQuery Mobile libs everything works just fine (see jsFiddle at the end).
  2. How about this implementation
$('#home').on('pageinit', function(){
    var ua = navigator.userAgent.toLowerCase(),
        page = '', 
        role='dialog';

    switch(true) {
        case (ua.indexOf("android") > -1):
            page = '#android';
            break;
        case (ua.indexOf("windows phone") > -1):
            page = '#winPhone';
            break;
        case (ua.indexOf("blackberry") > -1):
            page = '#Blackberry';
            break;
        case (ua.indexOf("bb10") > -1):
            page = '#bbTen'; 
            break;
        case ($(window).width() < 599):
            page = '#generic';
            break;
    }
    if (page.length) {
        $.mobile.changePage(page, {transition:'pop', role:role});
        return false;
    }    
});

And here is working jsFiddle

Upvotes: 1

Related Questions