onclick download function is an empty string? - javascript

I am having an odd problem in my onclick handler.
I am calling a javascript function "download" in the onclick of an . This has been in use on production websites for years. Recently, I get a strange javascript error when clicking the button in Firefox or Chrome (not a problem in IE8). Firefox says "TypeError: download is not a function" and Chrome says "TypeError: string is not a function".
HTML:
<a onclick="download('position','container','ids');return false;" href="#">Run download</a>
JS:
function download(position, container, ids) {
alert('in download');
}
You can see this demonstrated in this Fiddle.
Primarily, I would like to know WHY this doesn't work (other functions work fine). It looks like if I rename the function or use a button instead of a link, the problem will be solved as well, but deploying such a change will be a nightmare. If it is necessary, that's fine, but I want to know why the download function no longer works.

It seems that, with HTML5, <a> tags support a new attribute named "download" (see this link for example), that has an empty value by default.
Your code will work if you change it to:
<a onclick="self.download('position','container','ids');return false;" href="#">Run download</a>
Indeed, events (onclick in this case) run in the scope of the element they are bound to (<a> here), so "download" means this.download if it exists.

Related

Problems with onclick link events on safari

I'm having problems with navitation on safari using nodejs with expressjs and javascript. I have links with a function on its onclick event like this one (simplified version):
<a href="#" onclick="goToPublicView('/home/main')">
I have this method defined on javascript (is important to know that this is a reduced example. Is necesary to have the onclick event with a function for doing more stuff rather than navigation):
function goToPublicView(viewUrl) {
window.location = window.location.origin + viewUrl;
}
When the link is clicked on chrome or firefox it works perfectly, but on safary this method doesn't seems to work (no error messages that I could see).
If I write the method on console it works
goToPublicView('/home/main');
I don't understand what could be the problem. Any idea?
it seems to be any problem with browser. I reinstalled safari and it works fine.

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.

Error when using js in href ie 11

I have a link:
someText
it works fine everywhere except ie(i try ie11) i have this error
This page can’t be displayed.
Make sure the web address //ieframe.dll/dnserror.htm# is correct.
How can i solve this?
If you use a javascript URI scheme in a HTML href attribute, this is different to using an onclick event handler.
In IE, the result of executing that JavaScript will replace the currently loaded document.
To avoid this (without refactoring your code to not do things this way), you can end your href with the javascript operator void, which tells your javascript to return nothing, at all (well, undefined).
Then IE will stay on the current page.
<a href="javascript:someObject.someFunction(); void 0" ...
...and you probably don't want the target="_blank" since you're telling a new window to run your JavaScript code, and your function is not available in that window.
I would do this instead:
someText
It will open a new tab as you intended, and it works in chrome, firefox and IE.

Old fashioned html onclick return false doesn't work in IE when jQuery script is included

Ok, so I'm quite new to jQuery, but found this bizzare problem just now,
If we ignore jQuery for a second and consider this scenario, if I have two links like below both with an href and both with and onclick event. The first link will not follow the href because the onclick returns false, and the second link will because the onclick returns true.
Dont follow
Follow
This works just hunky dory in every browser as it should, the thing is, as soon as I include the jQuery script on the page this stops working in all versions of IE which then always follows the href whether the onclick returns false or not. (it continues to work fine in other browsers)
Now if I add an event using jQuery and call .preventDefault() on the event object instead of doing it the old fashioned way this behaves correctly, and you may say, well just do that then? But I have a site with thousands of lines of code and I am adding jQuery support, I don't want to run the risk that I might miss an already defined html onclick="" and break the web site.
I cant see why jQuery should prevent perfectly normal JavaScript concepts from working, so is this a jQuery bug or am I missing something?
The most likely cause is that you have a syntax error elsewhere in the page that is preventing javascript from running properly on the page. Turn on script error notifications in your browser to make sure it isn't hiding errors from you.
Try also:
onClick = "event.returnValue = false; return false;"
I corrected your sample code for the second link and tested in IE 8 and it works fine. I'm willing to bet JohnFx is right and you have some other error on your page stopping it from working.
I tested using an included jquery library as well.
Sample:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
Dont follow
Follow
</body>
</html>

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.

Categories

Resources