javascript not loading in firefox alone - javascript

I have added a piece of javascript code and it is not getting reflected in some of my peer's machine. Don't know whats going wrong.
This is what I did.
OnClick of a button, there was an existing JS function and I added an overlay feature inside the click event like,
function existing() {
var testDate = document.getElementById('test');
......
.....
newOverlay(); // This is the newly added function
}
I defined the newOverlay() as
function newOverlay(){
document.getElementbyId('divId').style.display = 'block';
}
I have defined the new function above the existing() and both the functions are inside the head tag
When I check this change in my local environment, it was working fine and there was no issues. When I deployed to the server, it was working fine for me and my peer could not see the change in firefox. But, he can verify the change in IE and Chrome.
We were thinking of some cache in the browser and we cleared the cache (ctrl+shft+del --> Everything) and tried. The issues occurred again. The part I added was not in the DOM itself. We tried Ctrl+F5, but it was not helpful.
When we reset the firefox browser and tried, the change got reflected and it was working fine. Don't know what was exactly happening. The issue is still occurring in some of our machines. Kindly share your thoughts.
Note: The entire JavaScript is inside a JSP and all are using the same version of Firefox (latest)

Try double quoting in the getElementById(). "id_name" instead of 'id_name'. Sometimes browsers are prone to this kind of bugs.

Related

HTML anchor tag's onclick attribute does not call javascript function

We have a DotNetNuke module running in an instance of DotNetNuke 5.4.4, installed on "Server A", a Windows Server 2008 R2 Standard machine with IIS 6.1 and Internet Explorer 11.
We're accessing our DotNetNuke module from "Server B", running Windows Server 2008 Standard, with Internet Explorer 9.
The issue happens when we click an anchor html element that has an onclick attribute, while accessing our module on Server B.
The anchor with the onclick is like:
<a onclick='OpenWindow("/DotNetNuke/DesktopModules/Module/View.aspx?dt=%c2%b2%c2");return false;'
href="http://000.00.0.0/DotNetNuke/DesktopModules/Module/View.aspx?dt=%c2%b2%c2"
target='_blank'
jQuery1431968126278="42">Doc name (SSN-SS-SSNN)</a>
And the OpenWindow function is like this
function OpenWindow(url) {
window.open(url, '', 'top=15,scrollbars=yes,menubar=no,height=800,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
As you can see we have an anchor element, with an onclick attribute, where it is supposed to call the OpenWindow javascript function, then return false, so the default action for clicking an anchor (browse to the href) does not happen.
When we click this link though (ONLY on server B), we get no popup window, no breakpoints in the OpenWindow function are hit, and the browser navigates to the href by opening a new tab (View.aspx). This suggests to me that the OpenWindow function referenced by the onclick attribute is not even running for some reason, even though it is on the anchor element, and works on any other server.
What I've tried
I compared the security settings, web.config files, and DotNetNuke settings between the Server A DotNetNuke and my local developer DotNetNuke instances, and found no differences in setup.
I compared the Server B Internet Explorer security settings to my security settings, and found no differences in setup.
On the advice of comments on this question, I tried changing the anchor tag to a span tag instead (removed href and target attributes), and I am seeing the same behavior. It works on Server A and Dev, but doesn't do anything on Server B now. I think the core issue is that either the onclick attribute is not being recognized, or is being blocked somehow.
I've now gone further and changed most of the <a>...</a> tags into <span>...</span> tags, with specific classes, that I then attach jQuery(...).live('click', ...) handlers to (using jQuery 1.4.2). That is allowing the clicks to work, but I still haven't resolved why the onclick attribute is being ignored.
What's weird..
If I open the developer tools (IE9), then click the "Edit" button to turn edit mode on and off again, all of the onclick attributes on anchor tags and img tags start working correctly, until I reload the page.
If I edit the onclick handler in any way manually through the developer tools, like say removing the return false; from the onclick handler, it will work, but if I put the return false; back to make it like I never changed anything, it stops working again.
What I'm trying to figure out
I am hitting a wall with what to check to figure out this issue. I can't reproduce it on my developer machine, and it works on Server A as well, so the code is working perfectly fine.
I'm thinking there must be a setting that I am overlooking somewhere, but where? I have no idea what else to check at this point, and I'm looking for ideas.
I don't have an exact answer, but I can give you the general idea of what is happening and why.
The two servers are not getting identical content -- perhaps they are pointed at different CDNs, perhaps one has an old file of a JavaScript file somewhere -- you'll have to walk through them one by one.
Something, somewhere, is applying an onclick handler to all of your anchor tags.
At first I thought it was something attached to the body element and targeting your links, but I ruled that out. The fact you can edit the HTML and save it and then the link works means you are detaching whatever was attached to that link element.
I would:
Save the entire web page from Site A
Save the entire web page from Site B
Run a diff tool against the two directories.
Have you tried to call window.open directly from the onclick attribute? It could be that the function is not loaded at the time the link is clicked, so it produce an error, so return false is not called, and the link proceed with its default behaviour (in this case open a tab).
If this is the case, look at the loading order of that function, or try placing it in a different part of your code (maybe within the onload event).
Check if you're showing JS errors in your Internet Options.
It might be a bit childish, but since you are opening a window as a Pop Up there can be issue that the URL from the site might be blocked from the browser. It should work at all times if you just replace
window.open(url, '', 'top=15,scrollbars=yes,menubar=no,height=800,width=800,resizable=yes,toolbar=no,location=no,status=no');
with
window.open(url);
Have you tried modifying your tag to:
<a href='javascript:MyFunction(this);' data-url='YourUrl'>Name</a>
MyFunction: function(obj) {
var element = $(obj);
window.open(element.data("YourUrl"));
}
Note that if the user's browser is configured to open Windows as tabs, there is not a workaround. target="_blank" is the best way that I know of to achieve this and enforcing browser behavior via GP.
Sounds like it's something not in the scope of the code you have provided. You mentioned opening the IE9 dev-tools makes it work, I suggest try adding console -polyfill, something like:
if(typeof(console)=="undefined") {
var console = {
log : function() {},
error : function() {},
debug : function() {}
};
}
Just in case some of your code is outputting things into the console and the JS code stops working after that event. Could be some external library, which after loading starts outputting things to the console - that might work differently on different servers because of caching settings and/or network latency.
NOTE: to test this properly, remember to add this into a SCRIPT tag before you load any JS code or import any external library.

JS assets in a subdomain wont load on ff & ie but chrome is all good

We are building a Saas product and have purchased a bootstrap dashboard, all the JS/CSS assets are loaded though a sobdomain via our CDN.
Works perfectly on chrome but on ie and ff the components do not load properly, on ff I get the following errors:
TypeError: can't access dead object
ReferenceError: event is not defined
A link to a non working example is below (We don't want to give access to our working dashboard for commercial reasons) You can see the error when click on the "dropdown" menu item. As far as I can tell, all the assets are loading correctly.
http://hunchbuzz.com/acme/index.html
Any help would be appreciated.
Well, take your bugs one by one. Did you turn on the JavaScript Debugger when you tested your page in IE? In the F12 developer tools, select Script and then Start Debugging.
First there were a couple of errors in jquery.sparkline.min.js which I ignored for the moment. Then I tried clicking your 'dropdown' link and got this error:
SCRIPT438: Object doesn't support property or method 'preventDefault'
custom.js, line 3 character 1193
The highlighted code is (reformatted for readability):
$('.dropmenu').click( function(){
event.preventDefault();
// ...
});
Do you see the problem? What is event? The code should be:
$('.dropmenu').click( function( event ){
event.preventDefault();
// ...
});
The fact that it worked in any browser at all is probably due to the global event variable that some browsers create for compatibility with very old code.
Now back to the sparkline problems. I see it hitting two errors in jquery.sparkline.min.js, but with the minimized code the problem isn't jumping out at me the way the other one did.
When you're debugging, it would help a lot to load the non-minified versions of jquery.sparkline.js, custom.js, jQuery, etc. Then you'll have readable code to look at in the debugger, which should make it easier to spot these problems.

"SCRIPT28: Out of stack space" on website using IE9

I am having an issue where all link button controls on my page do not work once we deploy our website to our production server. Here are a few details:
We have 3 environments upon which we develop: Our local Machine, which uses local IIS7 to run for development; test environment which is an actual webserver behind our firewall(IIS6); Production which is our live webserver(IIS6). The website works fine on local machines and test server but once we click a link button on production server it hangs.
The problem does not exist in Chrome, or FireFox it only exists in IE9. It does not exist when you put IE9 in compatibility mode.
If I use the IE9 Developer tool bar and watch the scripts, as soon as you click one of the link buttons the console shows this error:
SCRIPT28: Out of stack space
, line 340 character 9
I am using quite a bit of JQuery and am wondering if this is causing an issue: However, I see no javascript errors.
Any thoughts?
Thanks for any suggestions.
As people said in comments: it means that infinite recursion takes place. Whether it is simple recursion or some devious path across code like a serpent biting its tail - unknown, it seems IE gives out no stacktrace, or does?
I've reproduced this issue when I'm doing the following code:
HTML
<span class="search-icon"><input title="search" type="submit" value=""></span>
JS
(function($) {
$('.search-icon').on('click', function(e) {
// The click event will call $('.search-icon').on('click', function(e) { .. } for every time
// which make an infinte loop in click event as long as there are no stop condition added here.
$(this).find('input').click();
});
})(jQuery);
I've solve this problem by changing my JS code to be:
(function($) {
$('.search-icon').on('click', function(e) {
$(this).closest('form').submit();
});
})(jQuery);
I hope this answer will be helpfull for you.
Can you post the code / a link to the code, or close this issue?
Common problems: you might have a closure problem in the html, thus different browsers interpret the html hierarchy differently, or you might be looping through a for(x in y) where x contains a backreference to y.
Check out the msdn page for info on this error. In my case, the error was caused by:
Your code triggered an event cascade.
An event cascade is caused by triggering an event that calls an event procedure that's already on the stack. ...
Basically, I was trying to trigger a click event (using jQuery) on a file upload control using the control's click event. Seems like it would cause infinite recursion. Perhaps you may be having a similar problems with your buttons.

Dynamically created iframe used to download file triggers onload with firebug but not without

EDIT: as this problem is now "solved" to the point of working, I am looking to have the information on why. For the fix, see my comment below.
I have an web application which repeatedly downloads wav files dynamically (after a timeout or as instructed by the user) into an iframe in order to trigger the a default audio player to play them. The application targets only FF 2 or 3. In order to determine when the file is downloaded completely, I am hoping to use the window.onload handler for the iframe. Based on this stackoverflow.com answer I am creating a new iframe each time. As long as firebug is enabled on the browser using the application, everything works great. Without firebug, the onload never fires. The version of firebug is 1.3.1, while I've tested Firefox 2.0.0.19 and 3.0.7. Any ideas how I can get the onload from the iframe to reliably trigger when the wav file has downloaded? Or is there another way to signal the completion of the download? Here's the pertinent code:
HTML (hidden's only attribute is display:none;):
<div id="audioContainer" class="hidden">
</div>
JavaScript (could also use jQuery, but innerHTML is faster than html() from what I've read):
waitingForFile = true; // (declared at the beginning of closure)
$("#loading").removeClass("hidden");
var content = "<iframe id='audioPlayer' name='audioPlayer' src='" +
/path/to/file.wav + "' onload='notifyLoaded()'></iframe>";
document.getElementById("audioContainer").innerHTML = content;
And the content of notifyLoaded:
function notifyLoaded() {
waitingForFile = false; // (declared at beginning of the closure)
$("#loading").addClass("hidden");
}
I have also tried creating the iframe via document.createElement, but I found the same behavior. The onload triggered each time with firebug enabled and never without it.
EDIT:
Fixed the information on how the iframe is being declared and added the callback function code. No, no console.log calls here.
Old question but for future reference:
As far as my experience onLoad is not called for file downloads. A way to solve it is to use cookies like they do here http://gruffcode.com/2010/10/28/detecting-the-file-download-dialog-in-the-browser/
Here's an example that works for me, without Firebug open (tested in FF 3.6.2 Mac): http://www.jsfiddle.net/Kukry/
I'm using the jQuery .load() event instead of onload.
var iframe = $("<iframe/>").load(function () {
alert("loaded");
}).attr({
src: "http://code.jquery.com/jquery-1.4.2.min.js"
}).appendTo($("#thediv"));
Note that I'm loading a JavaScript file, not an audio file, so that might make a difference.
Maybe you call some Firebug internal function, like console.log(), somewhere? In that case, Firefox will threw an exception which can stop the execution if Firebug is not active.

JavaScript error in Safari, only sometimes

I have a webpage that is using jQuery to hide divs on the page load and show them later based on user interactions.
In my $(document).ready() I execute a bunch of code to hide these divs and to bind a function to the click() handler from jQuery for the regions that trigger showing these divs. It also grabs some values out of the HTML to be used by scripts later. The latter is what's causing an issue.
This code works fine in Firefox and Chrome/Chromium (we're still working on the CSS for IE, but the JS works as far as I can tell). In Safari, it works flawlessly about 70% of the time. Every few page loads however, a line in my $(document).ready() gives me an error and stops the JS from executing, also halting the drawing of HTML for the rest of the page.
the line is:
var itemCount = document.getElementById('itemCount').innerHTML;
The debug console in Safari says "Null Value". The thing is, I see the following in my HTML (from the "view source" of the page after it failed to load right):
<div id="itemCount" style="display:inline">0</div>
and it is the only item with this id (obviously.)
I'm thinking that somehow the JS is getting run before the document is actually ready, and was thinking I'd try testing to see if document.getElementById('itemCount') returns null and wait for a bit if it does, but I don't know if this would work, or if there is a less ugly solution.
Let me know if I'm missing something obvious, or being dumb some other way.
From the way your code is written, I think there must be some other error on the page that is causing this. Your first code block should be:
var itemCount = $('#itemCount').html();
...and the second:
<span id="itemCount">0</span>
A <div> set to be displayed inline is a <span>. A <span> set to be a block-level element is a <div>. That's the only reason there are the two tags. They're otherwise identical. Use the right one for the task.
Not that I expect either of these changes to change your symptom. I just suspect you have other...questionable things on your page, and that's what's really causing the problem. Wild guess: move the <script> block containing the ready() handler to the bottom of the document's <body>.
If you're not already using Safari 4, by all means do so. Turn on the Develop menu in the advanced preferences, then say Develop > Show Web Inspector before loading your page. If there are errors, it will do a better job of showing you why than Safari 3.
Seems to be an old bug. See ticket 1319 and ticket 4187.
See this potential workaround:
After some experimenting and deleting 99% of this post :) - adding an empty style tag dinamically magically fixes the problem:
(function(){
if (!/WebKit/i.test(navigator.userAgent)) return;
var el = document.createElement("style");
el.type = "text/css";
el.media = "screen, projection";
document.getElementsByTagName("head")[0].appendChild(el);
el.appendChild(document.createTextNode("_safari {}"));
})();

Categories

Resources