jQuery clash on Internet Explorer - javascript

I put together a script that works a charm in Chrome and that, for some reason, refuses to work properly in Internet Explorer 9. The page simply hangs/freezes forever ... and then loads. Likewise, when the user does anything on the page after it has loaded (in this instance loading highcharts by selecting items on dropdown boxes) it will hang/freeze ... and eventually work.
I have tried to debug the page but the freezing makes it very difficult and agonizing. I have had no success identifying the source of the issue. My code loads three libraries and uses one custom script that I put together myself.
Here are the three libraries:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="../Highstocks/js/highstock.js"></script>
<script src="../Highstocks/js/highcharts-more.js"></script>
What I do know from my debugging efforts:
(1) The page refuses to load properly in IE whether I include my custom code or not.
(2) I have tried to remove my libraries one by one. When I remove jquery-ui.min.js the page loads normally. Obviously can't do much with it at that point though ... :-) I have tried loading different versions of jQuery and jQuery UI with no success.
Does anybody have a clue as to what I can do to overcome this bottleneck?

Related

Javascript issues in Safari and Internet Explorer

The problem is that the slider on the home and products page only works with firefox chrome and Opera. It just fails to move in either IE or Safari. The second issue is about how the site scales on mobile devices. I've looked into mobile event handling, but with less than great results.
http://dextersaltmedia.net78.net/
Copy-pasting the entire responsiveslides.jquery.js file into the console makes the thing work normally, so your problem is in
<script type="text/javascript" src="responsiveslides.min.js"></script>
The only issue is that the library module never runs, even though the library gets included as a file.
Put your script tags at the end of the page, that might work better. Or try placing the library script tag at the end alone.
Ideally though, you should just bunch up jquery and the library file in one .js file and include that one.

Alert does not trigger, JS is not detected

I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.
(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.
You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.
Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>

Leaflet map -- sometimes it shows, sometimes it doesn't, any idea why?

Firefox 24.0 and the most recent Chrome both seem to refuse to load my leaflet map...but low and below -- it loads on Safari on my Iphone (not useful, but interesting to note).
This is my first stab at Leaflet and Bootstrap...other then the .container working unpredictably when I called it from localhost...I haven't had any problems until I tried to load it onto a webpage...
I am mostly curious why this is, I haven't seen something like this before...
Thanks!
Site: Link to Leaflet Map
Any thoughts maybe?
Ok the issue is probably related to cdn and security. When I open your sample site in Chrome it gives me a warning that a script is being loaded from unauthoriced sources.
Since FF23 these scripts are also blocked directly in the browser, and you get error messages as such:
Blocked loading mixed active content "http://code.jquery.com/jquery-1.10.1.min.js"
When I allowed to load unauthorized scripts in chrome, (there is a little shield icon in the address bar) it worked without a problem!
So try to provide these scripts locally, it might have something to do with google drive, that it is more restrictive because of javascript threats as such.
I hope it helped, and if you think this is the solution please mark it as an answer.
Thanks
You are loading leaflet.js before jquery, I get 9 js errors on the page.
One of them says:
ReferenceError: jQuery is not defined
Is leaflet dependend on jquery? Then you should load it first...
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Delphi, EmbeddedWB/TWebbrowser - jQuery not executing

I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.

why does firebug debugging sometimes work and sometimes not?

I want to debug a javascript file that is embedded in the HEAD element.
I navigate to the site, see the code, and make a breakpoint:
(source: deviantsart.com)
But when I click on Reload, the script disappears and it doesn't stop at the breakpoint:
(source: deviantsart.com)
Debugging was working earlier so I know it works in general. What do I have to do so that Firebug always debugs my script?
I've noticed this behaviour before as well. It seems that it can happen if you refresh the page while the debugger is running (i.e. after you've hit your breakpoint and are stepping through code). This is far from conclusive, just something I've casually observed over time.
Also, I try to avoid having multiple tabs open with firebug active, as it seems to get confused.
Edit: just thought I'd add that I've seen this manifest itself in a few different ways:
the external script file does not appear at all in the scripts panel.
the external script file appears but firebug doesn't "see" it. You know this has happened because the line numbers beside the code where a breakpoint can be set won't be highlighted (used to be green but now appear to be just a darker shade than other lines). I've seen this happen with inline javascript on a HTML page (horrors!) as well.
the external script file is there, but you can only see a single screen full of code. Where "screen full" is the firebug panel viewport.
shut down firefox and then restart. sometimes firebug gets confused. also make sure you have the latest version.
You need activate the script tab
I'm not sure that having a <script> inside <head> (as opposed to, inside <body>) is actually legal HTML. If it's not, as I suspect, you can't fault Firebug for not supporting it well...!-)
The bugs in script processing that I know about are 1) jquery dynamic loading of scripts fails, 2) new Function() cannot be seen, 3) some kinds of document.write() cannot be seen.
Firebug processes script files in series with Firefox. This means that Firebug must be active when the page loads and it means that any exception in the path will cause the files to be mis-processed. If you opened firebug before loading and you still see problems, then the most likely fix is to install Firebug in a new Firefox profile. This causes you to get a completely fresh set of default options and you run Firebug without other extensions. As you re-add other extensions, look for problems in seeing scripts: then maybe you will discover what extension is interfering with the code path for processing scripts. I know this is a pain in the neck, but so is JS debugging without source ;-). We are working on testing with more Firebug and Firefox extensions installed to try to reduce these problems.
In our case it was the bundling of JS files.
It is not only FireFox, it is same for Chrome.
We moved the file out of the bundle and put it on the page where it needed to be referenced and it started working like charm.

Categories