New issue 4 by hinfra: Little bug with jQuery Mobile
http://code.google.com/p/mobile-bookmark-bubble/issues/detail?id=4
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?
I'm not sure I understand the problem. Can you take screenshots of this
behaviour and attach them here?
Try it yourself here: http://hectorgarrofe.com/m/
It's a testing site.
Comment #3 on issue 4 by ntho...@google.com: Little bug with jQuery Mobile
http://code.google.com/p/mobile-bookmark-bubble/issues/detail?id=4
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.
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?
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>
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.
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!
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/e736caebfe28fa8b0c3541ba678cbfe5d7968cab
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.