Little bug with jQuery Mobile

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Insert the bubble script in a jQuery Mobile web app.
2.Acces to the homepage

What is the expected output? What do you see instead?
The expected is see the bubble like in the example, but when you add this to a 
jQuery Mobile web app, the page shows a loading box included in the framework. 
If you let the time pass, the bubble hides correctly, but if you press the 
close button, 2 another loading boxes comes up, the first with the loading and 
the second with the message "Error loading page".

It is functional, but I want to avoid the loading boxes because it's not clean.

What version of the product are you using? On what operating system?
iPhone 3G with iOS 4.1.

Please provide any additional information below.

I think the framework loads the content via AJAX and produces a little conflict 
showing the box. Any idea how to obviate this?

Original issue reported on code.google.com by hin...@gmail.com on 27 Oct 2010 at 2:39

[GoogleCodeExporter]

I'm not sure I understand the problem. Can you take screenshots of this 
behaviour and attach them here?

Original comment by ntho...@google.com on 27 Oct 2010 at 11:04

[GoogleCodeExporter]

Try it yourself here: http://hectorgarrofe.com/m/

It's a testing site.

Original comment by hin...@gmail.com on 27 Oct 2010 at 11:55

[GoogleCodeExporter]

Okay, yeah, that looks bad. I took a quick look through the jQuery Mobile docs 
but I couldn't find any explanation for why this would be happening. I would 
suggest you follow up with them; if you show them the bookmark bubble code they 
may be able to explain why you're seeing these loading pages and hopefully how 
to get rid of them. :) This doesn't seem like something we'll be able to fix 
within the bookmark bubble code, though.

Original comment by ntho...@google.com on 28 Oct 2010 at 1:05

• Changed state: WontFix

[GoogleCodeExporter]

I follow up with them, sure.

"This doesn't seem like something we'll be able to fix within the bookmark 
bubble code, though."

I don't know... when the bubble disappears, the loading pop up don't appears. 
It's only when it appears or when you tap the close button. If you make the 
show and close function similar to the hide one, the problem must disappear.

I'm wrong?

Original comment by hin...@gmail.com on 28 Oct 2010 at 1:51

[GoogleCodeExporter]

It's because the Bubble sets the hash parameter and jQuery Mobile uses hash 
changes for navigation. When the hash changes, jQuery Mobile attempts to goto 
the page indicated by the hash (in the example 'bmb') but throws an error 
because that page doesn't exist.

You could modify your override for the setHashParameter to not set the hash 
(you'll probably have to tweak the hasHashParameter too).

Alternatively, the following might work (though I haven't tested it). Add it 
right before you call bubble.showIfAllowed()

<code>
$(document).bind('hashchange', function(e, extras) {
    preventLoad = bubble.hasHasParameter();
});
</code>

Original comment by batmoo on 28 Oct 2010 at 2:20

[GoogleCodeExporter]

Thanks for the answer! Your fix is not working.

I will try to override the setHashParameter and tell you what happens. I don't 
know how to do it, any idea will be helpful.

Original comment by hin...@gmail.com on 28 Oct 2010 at 4:18

[GoogleCodeExporter]

If i delete this line:

<code>
    bubble.setHashParameter = function() {
      if (!this.hasHashParameter()) {
        window.location.hash += parameter; // I DELETE THIS LINE
      }
    };
</code>

The bubble shows up with no loading pop up. But when you tap the close button, 
the loading still appears.

I lose any functionality deleting this line? Why still getting an error when 
the user tap close?

Thanks in advance!

Original comment by hin...@gmail.com on 28 Oct 2010 at 4:31

[GoogleCodeExporter]

The close button issue is because of a bug in the alpha version of jQuery 
Mobile. It looks like it will be fixed for future release though: 
http://github.com/jquery/jquery-mobile/commit/e736caebfe28fa8b0c3541ba678cbfe5d7
968cab

Original comment by batmoo on 29 Oct 2010 at 4:08

[GoogleCodeExporter]

Although this is an issue with jQuery Mobile, setting the 'parameter' variable 
to '#' "works".

e.g. var parameter = '#';

See http://clients.leslieoa.com/experiments/iphone/ for a little demo.
Hope this helps.

Original comment by Leslie.Owusu.Appiah on 2 Nov 2010 at 2:23

[GoogleCodeExporter]

I've used cookies :)

bubble.hasHashParameter = function() {
      return $.cookie('bubble');
    };

    bubble.setHashParameter = function() {
      if (!this.hasHashParameter()) {
        $.cookie('bubble', true, { expires: 365 });
      }
    };

Original comment by bcl...@gmail.com on 4 May 2012 at 1:27