javascript:void() will throw a javascript error - you need to use javascript:void(0)

 

This is one of those javascript errors that makes me shake my head a bit, but with more and more Ajax style apps being built in Asp.Net, I have started seeing this quite a bit.

If you have something like this:

<a href="javascript:void()" onclick="doMyFunction()">Click Here</a>

It will throw the following javascript error (in Firefox, at least).

void

 

The solution is to ALWAYS pass the void function a 0 - like this:

<a href="javascript:void(0)" onclick="doMyFunction()">Click Here</a>

 

More later - joel

10 Comments

  • Another solution would be "javascript:;" which is a little bit shorter.

  • Dear god I hope you're not actually using 'inline JavaScript', this is 2009!

    Seriously though, why aren't you using unobtrusive JavaScript?

  • Mark,

    Thanks for the reminder, I thought it was 2008.

  • Thanks for the comment, Mark, and the heads up on what year it is ;) - this example is just an illustration of a common problem - I think the jury is still out on the best way of implementing unobtrusive JavaScript at this point.

    My next example may just use the jQuery methodology that I recommend, though, since it matches how i like to work in c#.

  • There is another more serious error I have with a web page called www.tagged.com. I cannot add people to my friends list and when I try, I get this error:

    // vim:set ts=4 sw=4 sts=4 foldmethod=marker syntax=javascript expandtab:

    TAGGED.namespace('api')

    /**

    * Handle tagged API calls

    *

    * @author terry chay &lt;tychay@tagged.com&gt; rewrote most of it to be cleaner.

    */

    TAGGED.api = {

    &nbsp; &nbsp;queue: [],

    &nbsp; &nbsp;defer: [],

    &nbsp; &nbsp;// {{{ - dequeue()

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * Play back a queue of actions.

    &nbsp; &nbsp; *

    &nbsp; &nbsp; * Note that this is automatically dequeued by call().

    &nbsp; &nbsp; */

    &nbsp; &nbsp;dequeue: function() {

    &nbsp; &nbsp; &nbsp; &nbsp;var temp = this.queue;

    &nbsp; &nbsp; &nbsp; &nbsp;this.queue = []; //clear the array

    &nbsp; &nbsp; &nbsp; &nbsp;this.call(temp);

    &nbsp; &nbsp;},

    &nbsp; &nbsp;// }}}

    &nbsp; &nbsp;// {{{ - deferDequeue()

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * Play back the defered queue also.

    &nbsp; &nbsp; *

    &nbsp; &nbsp; * Note that this is automatically dequeued by call().

    &nbsp; &nbsp; */

    &nbsp; &nbsp;deferDequeue: function() {

    &nbsp; &nbsp; &nbsp; &nbsp;this.queue = this.queue.concat(this.defer);

    &nbsp; &nbsp; &nbsp; &nbsp;this.defer = []; //remove from queue

    &nbsp; &nbsp; &nbsp; &nbsp;this.dequeue();

    &nbsp; &nbsp;},

    &nbsp; &nbsp;// }}}

    &nbsp; &nbsp;// {{{ - call(postObj,postCall)

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * @param postObj can be an object that contains the key value pairs to be

    &nbsp; &nbsp; * passed to the handler, an array of such objects or a string encoding of

    &nbsp; &nbsp; * the parameters directly. For example:

    &nbsp; &nbsp; * &lt;code&gt;

    &nbsp; &nbsp; * postObj = [

    &nbsp; &nbsp; * &nbsp; &nbsp;{

    &nbsp; &nbsp; * &nbsp; &nbsp; method : 'tagged.profile.get_box',

    &nbsp; &nbsp; * &nbsp; &nbsp; callback : 'TAGGED.profile.loadBox',

    &nbsp; &nbsp; * &nbsp; &nbsp; box_type : 'basicinfo',

    &nbsp; &nbsp; * &nbsp; &nbsp; ...

    &nbsp; &nbsp; * &nbsp; &nbsp;},

    &nbsp; &nbsp; * &nbsp; &nbsp;{

    &nbsp; &nbsp; * &nbsp; &nbsp; method : 'tagged.profile.get_box',

    &nbsp; &nbsp; * &nbsp; &nbsp; callback : 'TAGGED.profile.loadBox',

    &nbsp; &nbsp; * &nbsp; &nbsp; box_type : 'basicinfo',

    &nbsp; &nbsp; * &nbsp; &nbsp; ...

    &nbsp; &nbsp; * &nbsp; &nbsp;}

    &nbsp; &nbsp; * ];

    &nbsp; &nbsp; * &lt;/code&gt;

    &nbsp; &nbsp; *

    &nbsp; &nbsp; * Addded app_id support, use createQueryString() on get string.

    &nbsp; &nbsp; * (20080327 tychay)

    &nbsp; &nbsp; *

    &nbsp; &nbsp; * @param postCall is optional, for when you want to run a callback function

    &nbsp; &nbsp; * &nbsp; &nbsp; after all calls are returned

    &nbsp; &nbsp; * @todo please upgrade code to obj.api_signature = '';use YUI cookies in utils

    &nbsp; &nbsp;*/

    &nbsp; &nbsp;call: function(postObj, postCall) {

    &nbsp; &nbsp; &nbsp; &nbsp;// auto dequeue

    &nbsp; &nbsp; &nbsp; &nbsp;if (this.queue.length) { this.dequeue(); return; }

    &nbsp; &nbsp; &nbsp; &nbsp;var postData = '\n'; //first line is ignored, always "mux"'d

    &nbsp; &nbsp; &nbsp; &nbsp;var getData = {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;application_id: 'user',

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;format: 'jsonp'

    &nbsp; &nbsp; &nbsp; &nbsp;};

    &nbsp; &nbsp; &nbsp; &nbsp;if (postObj.constructor == Array) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for (var i = 0, len=postObj.length; i &lt; len; ++i) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;postData += TAGGED.api.createQueryString(postObj[i],true) + "\n";

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;} else if (postObj.constructor == String) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;postData += postObj + '\n';

    &nbsp; &nbsp; &nbsp; &nbsp;} else {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;postData += TAGGED.api.createQueryString(postObj,true) + "\n";

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;getData.session_token = YAHOO.util.Cookie.get('S');

    &nbsp; &nbsp; &nbsp; &nbsp;TAGGED.api.callback.argument = postCall;

    &nbsp; &nbsp; &nbsp; &nbsp;var request = YAHOO.util.Connect.asyncRequest(

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'POST',

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'/api/?'+TAGGED.api.createQueryString(getData),

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;TAGGED.api.callback,

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;postData

    &nbsp; &nbsp; &nbsp; &nbsp;);

    &nbsp; &nbsp;},

    &nbsp; &nbsp;// }}}

    &nbsp; &nbsp;// {{{ - callback(o)

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * Handle ajax return

    &nbsp; &nbsp; */

    &nbsp; &nbsp;callback: {

    &nbsp; &nbsp; &nbsp; &nbsp;success: function(o) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (!o || !o.responseText) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("An error occurred. Please refresh the page and try again. Response is empty.");

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return false;

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;try {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;eval(o.responseText);

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//console.log('end');

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} catch(x) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("An error occurred. Please refresh the page and try again. Exception in eval. " + x.toSource());

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return false;

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (o.argument) { o.argument(); }

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return true;

    &nbsp; &nbsp; &nbsp; &nbsp;},

    &nbsp; &nbsp; &nbsp; &nbsp;failure: function(o) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//console.log("An error occurred. Please refresh the page and try again. Reponse failed");

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// no failure alert since this function is called if a user clicks

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// away during an ajax response.

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp;},

    &nbsp; &nbsp;// }}}

    &nbsp; &nbsp;// {{{ + nullResponseHandler()

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * Since all calls are JSONP now, allows a call to have a null function

    &nbsp; &nbsp; * response.

    &nbsp; &nbsp; */

    &nbsp; &nbsp;nullResponseHandler : function() {},

    &nbsp; &nbsp;// }}}

    &nbsp; &nbsp;// {{{ + createQueryString(obj,appendRequired)

    &nbsp; &nbsp;/**

    &nbsp; &nbsp; * Encode a javascript object into components

    &nbsp; &nbsp; *

    &nbsp; &nbsp; * should encode the name; made the removal of trailing '&amp;' more efficient

    &nbsp; &nbsp; * (20080327 tychay)

    &nbsp; &nbsp; */

    &nbsp; &nbsp;createQueryString: function (obj,appendRequired) {

    &nbsp; &nbsp; &nbsp; &nbsp;var str = '';

    &nbsp; &nbsp; &nbsp; &nbsp;if (appendRequired) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//obj.inc = new Date().valueOf();

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;obj.api_signature = '';

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (TAGGED.guid) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;obj.track = TAGGED.guid;

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// make sure method is the first call {{{

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (obj.method) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;str += 'method='+encodeURIComponent(obj.method)+'&amp;';

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;delete obj.method;

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("An error occurred. Please refresh the page and try again. Method is missing.");

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return '';

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// }}}

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;for (i in obj) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;str += encodeURIComponent(i) + '=' + encodeURIComponent(obj[i]) + '&amp;';

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;// Remove trailing '&amp;'

    &nbsp; &nbsp; &nbsp; &nbsp;if (str.length) {

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return str.substr(0,str.length-1);

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;return str;

    &nbsp; &nbsp;}

    &nbsp; &nbsp;// }}}

    };

    // }}}

    Can anyone possibly help me?

  • I think a more appropriate way to express

    Click Here

    would be
    Click Here

  • When I go to watch the yahoo news videos I get "javascript:void" at the bottom in the gray area. This only started in the last 3 days. I've done nothing different to my pc for this to happen. I have IE 8. I spent 2 hours with dell and they could not solve the problem. We got rid of 8 and went to IE 7 but that did not solve the problem so I reinstalled IE8.
    Any ideas what I can do. I'm not computer savy so please give me super easy directions:O) I sure would appreciate it if you could help. Thanks.

  • Hi
    I am facing the same problem as Melody. Only difference is that I get this message when I try to use my orkut account and post messages or try to scrap.
    I had IE 6 version earlier, and installed IE 8. Could it be due the IE version ?
    Can some one help ?

  • Upgrading/reinstalling IE doesn't help? Well, have you tried instead using Firefox? Or Opera? Or Safari? Or Chrome? One of those solutions will usually solve all your IE-related problems.

  • thanks man it's worked.

Comments have been disabled for this content.