Trying to get javascript to click a link when function is called

[jm999]

Hi. I'm trying to create a function that clicks a link when called. Its working in IE 7 but not in Firefox/Safari. here is the function:

function open_greybox() {
			  	document.getElementById("grey_link").click();
}

The error console for firefox is telling me:

Error: this.document.getElementById("grey_link").click is not a function

Does firefox not support "click()"? Is there a workaround? A hidden link has to be clicked by javascript when the function is called (from a flash movie).

Any help would be greatly appreciated!

[Webnerd]

Yes you can, but not that way in a cross-browser fashion. Ie uses fireEvent and FF,Safari etc use a combination of other stuff:

function fireEvent(obj,evt){
	
	var fireOnThis = obj;
	if( document.createEvent ) {
	  var evObj = document.createEvent('MouseEvents');
	  evObj.initEvent( evt, true, false );
	  fireOnThis.dispatchEvent(evObj);
	} else if( document.createEventObject ) {
	  fireOnThis.fireEvent('on'+evt);
	}
}

So, you would call :

fireEvent(document.getElementById("grey_link"),'click');

[harumph]

Why not put the link call within the function?

<script>
Function wugga(){
//....
//do function stuff
//....
document.location.href = "blah.html";
}

//-->
</script>

?

[Paka]

Firefox does not have a click() method for links, only html forms elements. You can simulate the functionality by getting and evaluating the onClick handler from the anchor tag:

function open_greybox() {
     var onclickHandler = document.getElementById('grey_link').getAttribute('onclick')
     if (onclick == null) document.location = document.getElementById('grey_link').getAttribute('href');
     else eval(onclickHandler);
}

[rnd me]

no need for complicated scripts.

if you have an onclick attrib, simply call it:
document.getElementById("grey_link").onclick();

[Paka]

Cleaned up version for use on any link where the onclick event is unknown to exist:

function clickLink(linkobj) {
     var onclickHandler = linkobj.getAttribute('onclick')
     if (onclickHandler == null) document.location = linkobj.getAttribute('href');

     //pass self reference back to handler in case handler normally called with 'this', other params will fail:
     else eval(onclickHandler(linkobj));
}

[Paka]

Cleaned up version for use on any link where the onclick event is unknown to exist. (Previous post was buggy):

function clickLink(linkobj) {
     if (linkobj.getAttribute('onclick') == null) {
          if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
     }
     else linkobj.onclick();
}

[zerofreedom]

Cleaned up version for use on any link where the onclick event is unknown to exist. (Previous post was buggy):

function clickLink(linkobj) {
     if (linkobj.getAttribute('onclick') == null) {
          if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
     }
     else linkobj.onclick();
}

<script  id="linkobj" src="MYURL" type="text/javascript"></script>

<script>
function clickLink(linkobj) {
if (linkobj.getAttribute('onclick') == null) {
if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
}
else linkobj.onclick();
}
</script>

is it right ??
i want when script1 (id=linkobj) loaded. then auto load all link in it.
can it ?

[zerofreedom]

anyone can help me ?

[nilsnh]

Like you I wasn't able to use the code that was provided in this thread. So, I turned to JQuery which made things a whole lot simpler.

You'll have to place the JQuery plugin somewhere on your site and then link to it before calling the function.

//First locate the plugin on your site
<script type="text/javascript" src="www.yoursite.com/jquery-1.4.2-min.js"></script>
//Then proceed to find the link and click it. 
<script type="text/javascript">		
$('a.initclick').click();
</script>

Quick explanation

$('a.initclick').click();

What that line does is to search for all links with the class of "initiclick".

So, the link you would like to have clicked would have to have a class of "initclick". Naturally you can adjust the name of that class as you like.

<a href="yoururl" class="initclick">YourUrl</a>

Good luck.

[nilsnh]

Ops. Noticed the "//" might break the script if it's not placed within <script> tags.

<script type="text/javascript" src="www.yoursite.com/jquery-1.4.2-min.js"></script> //First locate the plugin on your site 

<script type="text/javascript">	
//Then proceed to find the link and click it. 	
$('a.initclick').click();
</script>

Sometimes the smallest things are enough to throw JS off.

[bitterpill]

@Webnerd - Thanks for the code. Your solution was the best for my situation. I'm unable to use the "window.location" variable in order to forward a user to another web address, and an anchor link embedded in a button-like object is a less than optimal solution.

thanks again.

[culter]

Hi, I have the same problem and your advices look great, but I'm not very experienced with js to applicate them. Could you please look at www.turie.eu/02? That map marker works in Opera and IE (displays lightbox style animation), but doesn't works in FF and Chrome. Thank you very much!

[bitterpill]

Hi, I have the same problem and your advices look great, but I'm not very experienced with js to applicate them. Could you please look at www.turie.eu/02? That map marker works in Opera and IE (displays lightbox style animation), but doesn't works in FF and Chrome. Thank you very much!

Try creating your dom element with Javascript. Assign the click event to the dom element. For example:

// this function fires the anchor link click event.
function fireEvent(obj, evt){
	var fireOnThis = obj;
	if (document.createEvent) {
		var evObj = document.createEvent('MouseEvents');
		evObj.initEvent(evt, true, false);
		fireOnThis.dispatchEvent(evObj);
	} else if (document.createEventObject) {
		fireOnThis.fireEvent('on' + evt);
	}
}


var el = document.createElement('a');
el.setAttribute('href', 'clouds.swf');
el.setAttribute('class', 'bump');
el.value = 'clouds';
fireEvent(el, 'click');

[ryanspeakman]

Yes you can, but not that way in a cross-browser fashion. Ie uses fireEvent and FF,Safari etc use a combination of other stuff:

function fireEvent(obj,evt){
	
	var fireOnThis = obj;
	if( document.createEvent ) {
	  var evObj = document.createEvent('MouseEvents');
	  evObj.initEvent( evt, true, false );
	  fireOnThis.dispatchEvent(evObj);
	} else if( document.createEventObject ) {
	  fireOnThis.fireEvent('on'+evt);
	}
}

So, you would call :

fireEvent(document.getElementById("grey_link"),'click');

Everyone seems to be jumping up and down over your solution - and, believe me, I'd like to join the grateful masses - but the following line in your script is returning an error in Internet Explorer:

fireOnThis.fireEvent('on'+evt);

The specific error is: "Object doesn't support property or method 'fireEvent'"

What gives? What's my malfunction?