www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

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

  1. #1
    Join Date
    Sep 2007
    Posts
    1

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

    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:

    Code:
    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!

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    909
    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:

    Code:
    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 :

    Code:
    fireEvent(document.getElementById("grey_link"),'click');
    Bitter web veteran

  3. #3
    Join Date
    Aug 2007
    Posts
    295
    Why not put the link call within the function?

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

    //-->
    </script>

    ?

  4. #4
    Join Date
    May 2009
    Posts
    4

    This works for Firefox

    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:
    Code:
    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);
    }
    Last edited by Paka; 05-09-2009 at 11:18 PM. Reason: added code

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    no need for complicated scripts.

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

  6. #6
    Join Date
    May 2009
    Posts
    4

    Generic link clicking function

    Cleaned up version for use on any link where the onclick event is unknown to exist:
    Code:
    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));
    }
    Last edited by Paka; 05-14-2009 at 02:27 PM.

  7. #7
    Join Date
    May 2009
    Posts
    4

    Generic link clicking function (revised)

    Cleaned up version for use on any link where the onclick event is unknown to exist. (Previous post was buggy):
    Code:
    function clickLink(linkobj) {
         if (linkobj.getAttribute('onclick') == null) {
              if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
         }
         else linkobj.onclick();
    }
    Last edited by Paka; 05-14-2009 at 04:35 PM.

  8. #8
    Join Date
    Apr 2010
    Posts
    2
    Quote Originally Posted by Paka View Post
    Cleaned up version for use on any link where the onclick event is unknown to exist. (Previous post was buggy):
    Code:
    function clickLink(linkobj) {
         if (linkobj.getAttribute('onclick') == null) {
              if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
         }
         else linkobj.onclick();
    }
    Code:
    <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 ?

  9. #9
    Join Date
    Apr 2010
    Posts
    2
    anyone can help me ?

  10. #10
    Join Date
    May 2010
    Posts
    2

    Hi there

    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.

    HTML Code:
    //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.

  11. #11
    Join Date
    May 2010
    Posts
    2
    Ops. Noticed the "//" might break the script if it's not placed within <script> tags.

    HTML Code:
    <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.

  12. #12
    Join Date
    Jun 2011
    Posts
    3

    Javascript - firing an anchor tag click event

    @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.

  13. #13
    Join Date
    Jun 2011
    Posts
    3
    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!

  14. #14
    Join Date
    Jun 2011
    Posts
    3
    Quote Originally Posted by culter View Post
    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:
    Code:
    // 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');

  15. #15
    Join Date
    Dec 2011
    Posts
    1

    I don't get it...

    Quote Originally Posted by Webnerd View Post
    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:

    Code:
    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 :

    Code:
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles