Chart is rendered in Chrome, but not in FF and IE - javascript

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.

Related

Using Javascript to sort table properly?

I've been working on this website on my computer for the past several weeks, but have had it a point that I just can't figure something out with my table sorting. The site itself runs off PHP but I've duplicated the HTML output to make it easier for you guys to help me diagnose what the problem is.
Here's a link to the Working Page: http://privateservercloud.com/working.htm
Here's a link to the Not Working Page: http://privateservercloud.com/not-working.htm
If you go to the Working Page, you'll see that you can click on any of the headers of the table and it will sort them. However, if you go to the Not Working Page, you'll see that this doesn't happen.
I'm trying to figure out what's missing or coded incorrectly and causing this to happen. I've uploaded all of the HTML, CSS, and Javascript that's running this part of the site so you can see how it's all working and hopefully that'll make life a bit easier for anyone that can help.
So... does anyone see what I'm doing wrong or know what needs to be fixed?
I load the not-working example in Firefox with Firebug and get the following:
TypeError: document.getElementById(...) is null
...for(var e=0;e<menuids.length;e++){var t=document.getElementById(menuids[e]).getE...
in dropdown.js line 1.
The debugging tools really are your friends. If you don't want to use Firefox, you can do the same thing with the development tools in Chrome.
I find errors when I run rhe validator at http://validator.w3.org and a pile of CSS errors at http://jigsaw.w3.org/css-validator/
When things don't work right, validate the HTML, which at least mostly assures you have a valid DOM. Then validate the CSS and use the JavaScript console in your favorite browser's debugger.

Javascript firefox issue

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;

"SCRIPT5039: Redeclaration of const property" in IE9

This has been asked already, but the solution there did not help me. What does this mean exactly? My regular HTML page uses a "script" tag to load my main_script.js file, where the first thing I do is:
var internetExplorerSucks = 30;
The variable used be be called FPS, but I thought it might have been taken by some random default global, so I renamed it to something that obviously isn't already taken. Still it fails to work. I get this error in the IE debug console:
SCRIPT5039: Redeclaration of const property
main_script.js, line 1 character 1
I tried making it a global by taking out "var", still didn't work. It should be noted that this is not in any function, just literally the first line of code in the file.
Some background: All of this code works perfectly in Chrome, Firefox, and Safari on Windows, OS X and Linux. IE is the only browser this does not work on. This project involves using an HTML5 canvas, which I got to at least display in IE 9 (I am using version 9), but this code does not immediately pertain to the canvas at all. In fact, I cannot seem to declare any variables whatsoever in my main_script.js file. I am able to, however, create functions without running into an error. Is that what I have to do? Put everything in a function (that would involve a lot of moving things around)?
Anyway, thanks for the help.
P.S. Internet Explorer is a nightmare.
I had the same problem in my code and it turn out that IE show wrong line were the redeclaration appear. In my case it was history I use later in the code. You should check whole code for redeclaration of the constants. You can try to comment out part of the code and see when it throw that error.

Has Chrome browser broken dynamic script loading?

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

mouseover not working in ie7

Having problems in IE7.It does not show me the "mouse over- drop down".
This "mouse over" was working well till yesterday also works in FireFox.
There a table that displays all the current documents.When one does a mouse over on a given document,it displays a list of options in form of a dropdown.
Can it be corrected in IE settings etc?
I am not talking about the javascript here , only the user settings.I am strictly the end user in this case.Also i tried downloading IE8 and it stopped in between.Hence I checked the ActiveX settings in IE and it was enabled.
Kindly help.
Your question seems well-founded, but it's difficult to discern what the question is exactly. Could you please elaborate? Source code may also help.
If you'd like to go a more DIY route, try throwing your code at JSLint. It will magically surface errors you didn't see.
Sitecore generates a lot of temporary and debug code files. This could be the problem. I would try deleting all of the temp/debug files, and see if that helps. They are scattered throughout the site, so you have to hunt for the debug directories.
However, I do see a lot of WEIRD JavaScript things with SiteCore. Sometimes I will load the content editor, and it wont work because of JS errors. I clear my cache and refresh and it works fine. But nothing in the JavaScript should be changing, since it would be the scripts from the vendor. I don't go in and change JS. Maybe they are generating JS somewhere.

Categories