CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
shennan
shennan

Reputation: 11656

JQuery Mobile and Firefox don't play well together?

Having some teething issues with jQuery Mobile. Was wondering if anybody else is experiencing a smattering of errors when they're using Firefox (desktop) and have the jQuery Mobile script includes in their <head> like so:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

In both Chrome and Firefox I get a host of CSS errors, which I presume are negligible. But in Firefox I get a couple of JS errors on top of that, which also seems to break my page (responsive elements not rendering like they would when I remove the jQuery Mobile script).

The JS errors:

Empty string passed to getElementById(). @ http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js:11100
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. @ http://code.jquery.com/jquery-1.9.1.js:3346

I know the errors seem pretty verbose, but I'm not familiar with bloaty javascript plugins and their policy on graceful degradation. Anyone else having this issue?

Update

As per Tim's answer, I've snapshotted evidence that these jQuery Mobile 'warnings' are actually effecting the page. Below is the page when I comment the jQuery Mobile script tags out:

Without jQuery Mobile

And here is what the page looks like when the jQuery Mobile script tags are left in:

With jQuery Mobile

Note that the reason I wanted to use jQuery Mobile is purely for it's mobile touch/swipe events. I have no interest in adopting it's hash/ajax linking functionality.

Upvotes: 2

Views: 5544

Answers (3)

Matthew Walker
Matthew Walker

Reputation: 2755

Yes, jQuery Mobile does "mess with the DOM" when it's loaded. For example, jQuery Mobile will wrap your content in a "page" div:

Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it's needed for managing pages (Pages - jQuery Mobile Docs)

But you could see if it's the CSS or the Javascript that's breaking your site by including only one of the jQuery Mobile bits at a time.

I too am getting the same warning regarding the call to getElementById(), and I can confirm that it is just a warning and does not impact layout. I have asked specifically about getting rid this warning, but to no avail.

Finally, have you tried using jQuery Mobile's custom builder to get just the parts you are interested in (i.e. the touch features)?

Upvotes: 3

user1234
user1234

Reputation: 8978

What Firefox is giving you are warnings, not errors :)

Taking a look at the jQuery Mobile source :

// find present pages
var path = $.mobile.path,
    $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
    hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
    hashPage = document.getElementById( hash );

Setting a breakpoint on that line using the Chrome Development Tools (Firefox and Firebug seemed unable to load the entire script), we can see that path.parseLocation().hash will be nothing when there is no hash in the URL, so document.getElementById( hash ) will throw the warning you saw in Firefox.

If it bothers you, you can turn off warnings in the Firefox Development Console, but if you're going to use jQuery Mobile I'm afraid the warning will be displayed for URL's with no hash. It isn't Firefox trying to tell you something IS wrong, it's just Firefox telling you something COULD be wrong, which is not true in this case.

Regarding the other warning, this discussion might be useful. It seems jQuery uses the deprecated getPreventDefault() for compatibility with Android 2.3.

Upvotes: 4

nshah
nshah

Reputation: 597

My stuff often gets thrown out of format when using Firefox (many other small bugs too) If its just for testing, I suggest Google Chrome or Safari for best performance...

Upvotes: 0

Related Questions