jQuery.mobile popup immediately hides after showing

Question

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.

score 4 · Answer 1 · answered Jan 08 '13 at 17:24

4

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');
});

answered Jan 08 '13 at 17:24

someuser

2,279
4
28
39

I'm not using Backbone and in my app the problem surfaced on `iOS` (6.0.1), not Android (4.0.3) (jQuery Mobile version is 1.2). I only needed step 2 - switching to the `click` event - to solve it. An alternative solution that worked for me - allowing me to stick with the touch event - was to call `preventDefault()` on the event object at the start of the event handler that eventually calls `popup('open')`. – mklement0 Jan 18 '13 at 23:07
This problem still appears in JQueryMobile 1.4.5 - Changing from 'tab' to 'click' also solved it for me. – Barsum Oct 07 '15 at 07:26

Kulbhushan Chaskar · Accepted Answer · 2014-03-06T10:38:17.330

3

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().

edited Mar 06 '14 at 10:38

answered Mar 06 '14 at 09:59

Kulbhushan Chaskar

353
2
10

score 1 · Answer 3 · answered Apr 18 '13 at 01:20

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.

score 1 · Answer 4 · edited May 23 '17 at 12:32

1

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

edited May 23 '17 at 12:32

Community

1
1

answered May 08 '14 at 00:21

Simon_Weaver

140,023
84
646
689

QuickFix · Answer 5 · 2012-10-15T09:33:00.483

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.

score 0 · Answer 6 · answered Feb 26 '13 at 17:14

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');
    }
});

score 0 · Answer 7 · edited May 23 '17 at 11:54

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.

jQuery.mobile popup immediately hides after showing

7 Answers7