{"id":1107,"date":"2010-04-12T19:56:48","date_gmt":"2010-04-13T00:56:48","guid":{"rendered":"http:\/\/unitstep.net\/?p=1107"},"modified":"2010-04-12T20:00:38","modified_gmt":"2010-04-13T01:00:38","slug":"triggering-links-from-javascript-using-jquery","status":"publish","type":"post","link":"https:\/\/unitstep.net\/blog\/2010\/04\/12\/triggering-links-from-javascript-using-jquery\/","title":{"rendered":"Triggering links from JavaScript using jQuery"},"content":{"rendered":"

Sometimes, you may want to trigger a link (that is, an anchor element<\/a>) directly from JavaScript. That is, you may want to simulate the user clicking on the link programmatically.<\/p>\n

If you’re using jQuery, you’ll no doubt be aware of the click()<\/code><\/a> method which can be used to trigger that event on an object. One would think that executing click()<\/code> on an anchor element would cause the browser to navigate to the URL<\/acronym>, but this isn’t the case. You cannot use jQuery’s click()<\/code> method to fully trigger or simulate a user clicking on a link.<\/strong><\/p>\n

Instead, click()<\/code>, when executed on links, only seems to trigger any event handlers attached to the DOM element rather than any default behaviour. I’m not sure if this is the case with other event methods or other DOM elements.<\/p>\n

The solution<\/h2>\n

Instead, the solution is to directly manipulate the window.location<\/code> object from JavaScript. One would think that since preventing the default action is quite simple (with jQuery’s event.preventDefault()<\/code><\/a>), triggering the default action of a link click would also be. But this isn’t the case. Here’s a simple example on how to simulate a user clicking on a link.<\/p>\n

<\/p>\n

In this contrived example, we have an ordered list of links that we’ve prevented the default action from executing on each. Instead, to activate a link we’ve provided an input box for the user to input the link number and then hit ‘Go’. When this happens, we grab the identified link and assign the href<\/code> attribute value of the link to window.location<\/code>, effectively recreating the default action of clicking the link.<\/p>\n

HTML<\/acronym> Source:<\/p>\n

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML<\/acronym><\/a> 1.0 Strict\/\/EN\"\r\n  \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n\r\n  <title>jQuery Demos<\/title>\r\n  <link rel=\"stylesheet\" href=\"styles.css\" media=\"all\" \/>  \r\n  <script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"scripts.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<h1>jQuery Demos<\/h1>\r\n\r\n<ol id=\"outboundLinks\">\r\n  <li><a href=\"http:\/\/www.google.com\">Google<\/a><\/li>\r\n  <li><a href=\"http:\/\/www.theglobeandmail.com\/\">The Globe and Mail<\/a><\/li>\r\n  <li><a href=\"http:\/\/stackoverflow.com\/\">Stack Overflow<\/a><\/li>\r\n<\/ol>\r\n\r\n<p>\r\nLink Number to activate:\r\n<input id=\"linkNumber\" type=\"text\" size=\"3\" \/>\r\n<input id=\"activateLink\" type=\"button\" value=\"Go\" \/>\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
JavaScript in scripts.js<\/code>:<\/p>\n
jQuery(function(e)\r\n{\r\n  jQuery(\"#outboundLinks\").click(function(e)\r\n  {\r\n    e.preventDefault();\r\n  });\r\n  \r\n  jQuery(\"#activateLink\").click(function(e)\r\n  {\r\n    var links = jQuery(\"#outboundLinks li a\");\r\n    var value = parseInt(jQuery(\"#linkNumber\").val());\r\n    \r\n    if (!isValidNumber(value, links))\r\n    {\r\n      window.alert(\"Invalid link number.\");\r\n      return;\r\n    }\r\n    else\r\n    {\r\n      \/\/ This won't work.  We cannot trigger the default \r\n      \/\/ behaviour of clicking on a link this way.\r\n      \/\/ links.eq(value - 1).click();\r\n      \r\n      \/\/ Instead, manipulate window.location directly.\r\n      window.location = links.eq(value - 1).attr(\"href\");      \r\n    }\r\n  });\r\n});\r\n\r\nfunction isValidNumber(value, links)\r\n{\r\n    if (isNaN(value))\r\n    {\r\n      return false;\r\n    }\r\n    else if (value <= 0 || value > links.size())\r\n    {\r\n      return false;\r\n    }\r\n    else {\r\n      return true;\r\n    }\r\n}<\/code><\/pre>\n
Note that window.location<\/code> is not a regular property<\/a>; it’s a special object that when assigned to, changes the URL<\/acronym> in the address bar of the browser.  There’s some debate over whether to directly use the location object or to use the window.location.href<\/code> property<\/a>.<\/p>\n
This accomplishes the task of triggering the default action of clicking on a link, albeit in a roundabout fashion.  Note that this example will only work for regular links that use href<\/code> attributes as the source of the new URL<\/acronym>.  If you have links doing more complicated things via the use of event handlers (i.e. Ajax), then you’re better off using click()<\/code><\/a> or directly invoking the JavaScript methods involved.<\/p>","protected":false},"excerpt":{"rendered":"
Sometimes, you may want to trigger a link (that is, an anchor element) directly from JavaScript. That is, you may want to simulate the user clicking on the link programmatically. If you’re using jQuery, you’ll no doubt be aware of the click() method which can be used to trigger that event on an object. One […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,167,137,277],"tags":[373],"_links":{"self":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/1107"}],"collection":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/comments?post=1107"}],"version-history":[{"count":14,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/1107\/revisions"}],"predecessor-version":[{"id":1121,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/1107\/revisions\/1121"}],"wp:attachment":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/media?parent=1107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/categories?post=1107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/tags?post=1107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}