JQuery Mobile and Firefox don't play well together? - javascript

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:
And here is what the page looks like when the jQuery Mobile script tags are left in:
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.

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.

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)?

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

Related

JQuery Mobile 1.4.5 does not seem to invoke javascript on ipad

Using JQuery mobile 1.4.5 (https://jquerymobile.com/)
Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...
My stripped down page (HTML) contains the following:
<div data-role="content">
<script src="test.js"></script>
<script>
$( document ).on( 'pagecreate', function( event ) { do_something(); });
</script>
</div>
The file "test.js", contains the following code:
function do_something() {
alert('here in do_something()');
}
When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).
On all other browsers, I get the alert.
Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).
ANY suggestions would be helpful.
Thanks in advance.
First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.
As you can see spinner that would mean jQuery Mobile and jQuery are loaded.
If they were successfully running on your desktop computer then you may check these:
Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.
Thanks to all who provided some insight...
Turned out it was an external javascript file that contained a try/catch block as:
try {
// code
}
catch {
// code
}
When changed to:
try {
// code
}
catch(err) {
// code
}
... after the change was made, all tests passed !!

Website with javascript doesn't work in IE9 but in IE9's compatibility mode - how to force compatibility view?

I know that there already is a question like this: Force IE9 into browser compatibility view
But since adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the the head section and reloading the page with ctrl+F5 didn't help there must be another way.
On my website is also a bxslider and according to this: bxslider not working in IE9 I replaced the elements (which had empty href attribute) with tags - still not effect. The images of the slider are displayed in full size one below the other. After activating compatibility mode the site works perfect.
I don't wanna rebuild my application from the scratch so what could I do to force the compatibility-view? Or is there at least a good free debugging tool for that? I downloaded the firefox addon IE Tab which has a debugbar but to use it you have to buy a premium version. I just don't know what is causing the error...
I found what was causing the error: Why does JavaScript only work after opening developer tools in IE once?
So frustrating and so simple. It was caused by the console.logs in the script. Without them it works like a charm.
If you use this code at the start of your JS (I use it in all my projects) https://gist.githubusercontent.com/elijahmanor/7884984/raw/console-monkey-patch.js it will override the console.log function so you avoid errors in IE but still get logging in modern browsers like chrome.

IE8 not loading jQuery 2.0 even though it's the first include and it's loaded from the same domain?

I have a page in which I use jQuery for damn nearly everything, thus I find it kind of problematic when jQuery won't load in IE8 (works fine in IE9 and, I presume, IE10).
I've tried all the usual trickery: putting jQuery at the top of the header and I am loading the file from the same site as I am trying to run. I always do these things, but now you know ;)
The IE8 console isn't to much help, as it just bangs on about stuff being undefined, and not having this and that property and method. All i can get out of it is that the jQuery file is being loaded (it finds errors in that too :/), but for same reason it isn't working.
If someone would be so kind as to have a look at it, this is a link to the actual page.
jQuery 2.0 completely dropped support for IE 8. You need to use 1.10.2 to support IE 6,7,8
They both currently have all the same features and functionality but 2.0 and up is smaller in KB due to dropping legacy code for IE and earlier.
60% of my visitors are on IE8 so I will be using v1.x for a long time
It's not surprising that this doesn't work, because jQuery v2 does not support IE8.
It says so very clearly on the jQuery site.
You need to use jQuery v1.x if you want to support IE8 or earlier.
(the functionality of v1.10 is identical to v2; the only difference is that v2 removes all the extra code they had in there to support old IE versions)

Jquery $('#someID > div').each(function(){..}) not working in IE

i don't face this problem while working on localhost only when I access the page using the ip address of my system this happens and it only happens with IE!! (works on all other browsers)
by the way i'm using Tomcat V6.0.0.29, IE8
I tried debugging the JS code using IE developer tools debugger, ofcourse when I open using http://localhost:8080/ everything works perfectly fine, but when I use http://myIP:8080/ this loop is giving a problem :-
$('#someId > div').each(function(){...});
As in this loop doesn't run at all, it just kind of skips it. I have checked the IDs they are fine moreover its working in localhost why should it give a problem when I access it using my IP?
Note :-
a. (correction) The problem is only there in IE7, it works perfectly in IE8.
b. As it turns out something weird is happening! i'm using IE8 when i open this webpage using localhost the developer tools shows its working in IE8 standards but when i use the IP address to access this page the developer tools shows its working in IE7 standards. When i changed the standards to IE8 it worked (using the IP address)!
c. But the problem is why the hell is it not working with IE7!! As in everything works except the loop mentioned above.
Finally i came to know what was causing the problem in IE7. Consider the below situation:-
<div id="div1">abc
<div id="div2">def
<div>hjs</div>
<div>zyx</div>
</div>
<div id="div3">xsj
<div>ask</div>
<div>iue</div>
</div>
</div>
The jquery i had written for traversing these divs was something like
$("#divId > div").each(function(){..});
Now for the first level div that is traversing the divs directly inside the div with id "div1" worked perfectly in IE7, but when i did something like:-
$("#div2 > div").each(function(){..});
This worked in all browsers (even in IE8!!) but not in IE7. This is because apparently IE7 requires the exact child selector for divs.
So for IE7 something like this needs to be written:-
$("#div1 > #div2 > div").each(function(){..});
for traversing the divs inside the div with id "div2"
So the problem was cause just by my lack of knowledge about IE7!!
sorry n thanks guys!
The culprit being IE it could turn out something as evil as the browser not caching the page when loaded from localhost, but reading it from cache when using the ip. Make sure you load the page to empty cache from your ip.
Check to see if your script is loaded when using your IP address. Sometimes browsers don't load scripts on special situations (for example when you want to load a script from an http source into an https page). Also you should check IE's security configuration.
To check whether your script is loaded and executed or not, simply put an alert('loaded') statement at the beginning of your code.
This may due to the group policy of your company for forcing Intranet sites using a specific version of IE in compatibility mode. I experienced exactly the same issue when I introducing some IE10+ Javascript libraries to my page.
To work around this you can either ask your company IT for changing the policy or force the browser to not using a compatibility view with the following tag.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
More details for this tag can be found with the topic below.
StackOverflow - Force IE compatibility mode off using tags

Javascript in IE8 very slow, IE7 + others fast using jQuery, jQuery UI, nyroModal

The page is rendered within an nyroModal (loaded via ajax) and the DOM is manipulated quite a bit using several plugins before actually showing the page.
Everything is fine in non-IE-Browsers and IE7, but in IE8 the resizable and draggable of an div is very slow and crawles along.
I know IE8 is slow. I know my DOM is big. I know i use a lot of plugins. My question is, what exactly slows it down, as other Browsers do it well?
I deactivated every plugin after each other to locate the culprit. Only having resizable activated it is still slow.
I used IE8 profiler and it says offset uses most of the time.
EDIT: I analyzed the page using dynaTrace AJAX Edition and it showes me that these 2 functions are responsible for the most exec time:
jQuery.fn.offset = function(options)
and
jQuery.expr.filters.hidden = function(elem)
both in jquery.js
i read somewhere that IE8 has problems with offset, but how can i circumvent this?
Edit2: I builded a test-page with just a link to open the page with all the resizing in a modal. works nice also in ie8 ! so i guess the big DOM of the modal-parent-page is the problem.
any advice appreciated!
Dynatrace has a very good javascript profiler. Check it out.
Check that your browser is not running in IE7 emulation mode.

Categories