This isn't my code, I'm just troubleshooting it. Some code that has been working for over a year has now stopped working in Chrome (12.0.742.122), but works in the other "big" browsers (including fellow WebKit stablemate Safari (5.0.5)). By "not working anymore" I mean that although the script file does load, it doesn't execute. The kind of behaviour you'd expect if loading a script into innerHTML or writing it into a div, but neither of which things are being done. The commented-out lines below were all failed attempts at getting it working, the first of those being the original code that had worked up until recently.
<div id="abc"></div>
<script type="text/javascript">
var d=document.getElementById("abc");
var s=document.createElement('SCRIPT');
if(s){s.src=script_path;}
//if(d)d.appendChild(s); //original line that still works in all other browsers
//if(d)d.parentNode.appendChild(s);
//if(d)d.parentNode.insertBefore(s,d);
//if(d)d.parentNode.insertBefore(s,d.nextSibling);
document.body.appendChild(s); //this works, script executes
</script>
What is wanted from this code above, is that the script is a child of the div. Presumably they want to be able to remove that child and have all script be removed at the same time (I'm not sure of their motivation).
I've discovered what the problem was, largely thanks to Martin Bieder's back and forth and introducing me to jsfiddle.net with his working example.
The issue was actually the test page and what you'd think would be a fairly harmless error they made in creating it. The div and all of the code will be represented below simply as ######, as it's not even relevant to the problem. It's actually a HTML problem. Chrome 12 isn't happy if you don't match up your closing tags properly. I really can't believe that it has an effect on the execution on script files, but it does. I've tried many many times in the last 10 minutes with the HTML tags right and wrong and unbelievably this really is the problem.
<font><center><b>
##########
</b></font></center>
You see how the font and center closing tags are the wrong way around, and that's enough to confuse Chrome sufficiently that it won't execute any dynamic script being added within those tags. Bizarre. I can't recreate this on jsfiddle, probably due to the nature of the site runs the html/js that you put onto it (using onload for example).
No it works. Google Analytics uses is, too.
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.google-analytics.com/ga.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga,s);
Have you tried to set to async the script element?
var script = document.createElement('script');
script.async = 'async';
It is all about 3 things.. Organization, Optimization, and debugging.
1)properly scoping your tags makes things easier to read.
2)properly organizing your code makes it easier to parse which means parsers can be faster and more efficient.
3)alot of the debug tools we use rely on this organization in order to display things like collapsible tags and present a more visual scoping
Related
The issues is with existing ASP.NET MVC 4 project. The View itself is not that big but there are also several service calls and what happens is that people with slow internet connection reports that for some period of time when they request the page it stay unresponsive, so they don't know if the content is loading or something went wrong.
So in general, what I need is a way to show a loading image as the very first thing from this page (or at least fast enough) so even if it takes some time for the browser to download the full content, at least the user will know that something is going on.
However it seems that this is not as trivial as it sounds. I came up with two ideas, one was already proven to not work in all cases and the second is also something that many people doesn't recommend.
What I've tried was to use pure JavaScript in the <head> tag like so:
<html>
<head>
<script>
document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>");
</script>
</head>
Of course the styling is just to get the idea. This seemed like it was working until recently when on a minor build of IE 11 the page broke which after some investigation was proven to be due to the usage of document.write() inside the <head> tag. Even though this seems to work on most browsers and versions the fact that it's a potential danger requires a change in the approach.
The second idea is pretty similar to this, again - writing directly in the <head> tag but this time instead of using document.write() just putting the html markup directly there. From what I've read this is also a recipe for disaster so I don't even want to try it, but those are the two ideas that I could came up with. Everything else just doesn't work for slow internet connections since the mainstream solutions relays on the fact that some part of the DOM is already loaded so you can use it to apply behaviour/style.
I hope I'm not the first one that got this problem so I would appreciate any suggestion on how to solve this issue. Since I am using ASP.NET MVC 4 there was an idea to use a dedicated controller with view which to get called first just for the sake of showing the loading image and then moving to the requested view. Even though this idea seems interesting I didn't have the time to think it over, it also sounds a pretty complicated, but anyways, all help will be appreciated.
When faced with the same issue, we did as you mentioned: Load a super-light-weight page first with a tiny loading icon & "Loading..." text, then called back to the server to pull down the heavy content in chunks using ajax.
If you content is really heavy, it's also worth mentioning that you need make sure you have gzip compression turned on at your web server layer also.
Don't block the rendering of the DOM. Load the page and call your scripts right before the closing body tag and attach to an event like DOMContentLoaded or window.load (if you're using jQuery, that would be $(document).ready). In other words, you should allow the page to load completely, even if it's empty, before running any of your JavaScript.
Then, don't worry about writing the "Loading" div dynamically. Just include it in the rendered HTML and hide it initially. The first thing your JavaScript will do, before issuing any AJAX calls, is to show this "Loading" div.
H ey there,
I am developing small web-application based on a lot of PHP and JS code and by chance opened the current index.php in Firefox instead of Chrome (my main dev browser).
I was rather shocked to see that one of my main components, a chart (made with amCharts), was not rendered at all. Strangely enough, the watermark of amCharts is shown...
Now I thought it just a hickup and opened the IE to have another browser for comparison, however, same problem there.
I went back to Chrome and everything is still fine there. This really confused me and made me think that it's a code problem, e.g. an unclosed parenthesis somewhere. So I copy pasted my code into several PHP / JS / HTML validators and none had any hits.
In addition I downloaded the Firebug addon for Firefox hoping to find some kind of error, but there is none to be found.
What I also tried to inserting some "console.log" passages in my code to see whether the code execution stops at some point, no luck either. All log messages are shown with their correct values.
Right now I am kinda at my wits end...
Does anyone have an idea / had a similar problem and knows how to solve this or what causes this or how I could find out what causes this?
Any help you can provide would be greatly appreciated.
best regards,
daZza
EDIT:
I fine-tuned the console.log commands and basically backtraced every single step. I now have found the problem, but don't know the source of it. Basically my whole view of logic in programming is breaking apart now... One and the same command returns a different result in another browser, what the hell?!
Here's are some code snippets from the problem area:
xmlData = xmlHttp.responseXML;
var x=xmlData.getElementsByTagName("row");
xmlRowCount = x.length;
console.log("Rowcount: " + xmlRowCount);
for (i=0;i<xmlRowCount;i++)
{
do something with every row in the source xml file
}
Now the problem is that in Chrome the rowcount is correctly returned as 417. FF returns 0 (I guess IE as well).
How can that be possible? How can a predefined command return different values? I just don't get it...
Edit2: To make the browser test complete, I also downloaded and tested Opera. It works fine there, which makes this whole thing even stranger. What is the difference between IE/FF vs. Chrome/Opera?
PS: Here's two screenshots (Chrome and FF) to visualize the problem:
Can you try to use the below code
var x=xmlData.body.all.tags("row");
or
var x=xmlData.all.tags("row");
Hope it helps.
I am new to javascript and have been working overnight to see how I can fix this error on IE: Here's the question I asked here yesterday: How to fix this jquery function to work in IE?
After spending more than 20 hours I still can't find out why it wouldn't render parts of my page properly.
At the very least I thought I could find a way to get the errors so I can fix them or do a separate javascript file just for IE, but no luck.
How do I see error messages for my script?
I used F12 to see the developer console but no help there, it won't even tell me what's wrong.
I am using IE 8 and 9.
I know that there could be many things wrong with this and I appreciate your patience in advance for helping me out. Thanks!
You have invalid HTML including many invisible characters within the head section which is also blocking the W3C HTML Validator from getting past the first few errors.
When I copied your source code into my text editor, I found a bunch of invalid invisible characters. Did you cut/paste your JavaScript from someplace like a web-page? The invisibles only appear in front of your custom written scripts in the <head> and nowhere else. This could certainly explain a lot, including the validation error about a misplaced </head> tag. Go back to your editor and delete the indentations on every single line within the entire <head></head> section, then re-indent each line from scratch.
I also see an invalid closing tag, </label6>.
Remove the invisible characters, fix the invalid HTML, and see what IE does.
Moving forward, get yourself a powerful text editor that will allow you to see invisible characters so you can delete them and properly indent as needed. Otherwise, I recommend re-typing your code rather than cutting & pasting.
For JavaScript errors, the best is to see the 'Console' tab for records.
If IE's one isn't showing anything, maybe you could try using FireBug Lite, adding the following script after <head> (YES, put it as first thing, so it loads first than anything else).
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
On side note, maybe isn't a JS problem and yes something about running code locally. IE has some policies that mostly block client-side code from running. (Remember those annoying ActiveX prompts?). Check Intranet configuration on Settings.
I developed a .htm document with an in-built script for javascript to run a program. In google chrome, the program works fine, but I got a beta test complaint that it didn't work on firefox 14.01 or opera. On testing with firefox 14.01, I can confirm it doesn't work (I assumed opera to be the same). I cannot insist the audience upgrade their browsers, as this is supposed to be widely compatible.
Doing a little tracing of the issue, I installed Firebug, which, on clicking the Javascript button to generate a coordinate the first time, it worked (clearly showing the function is defined and exists), but the second time, Firebug complained that:
"ReferenceError: GenerateCoord is not defined".
This wouldn't be so ironic if it only did this after generating an (encrypted) coordinate (thus calling GenerateCoord that is supposedly 'undefined').
If one looks in the code, one can clearly see that the function GenerateCoord is clearly defined before it is called. I would say firefox has an 'onclick' issue, but then it begs the question why did it work the first time I clicked it (calling GenerateCoord via 'onclick') but not the second?
Reloading the file allows the button to work the first time, and the first time only. I am baffled as to how firefox can call a function one time that it then says is undefined the next. Am I missing something here?
Javascript and HTML code can be viewed here:
http://pastebin.com/4qykTfEW
-
How do I solve the problem, and is there an easier solution than re-writing the code to avoid onclick (that seems to work in certain circumstances but not others)?
The problem is that using document.write overwrites the entire HTML page, thus inadvertently removing the GenerateCoord script. I'd suggest appending the link to the document (in ShowTarget) rather than attempting to re-write it.
For example, have a container element where the link should be:
<div id="links_container"></div>
Then to append the links, use:
document.getElementById('links_container').innerHTML = Link;
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola