Click ID and open URL?

Question

Hi Guys,

I am trying to click on a #ID and open a URL - but [as a newbie] - I can't seem to get it. I am using

$('#Test').click(function() {
    OpenUrl('some url');
    return false;
});

Answer 1

hm if your OpenUrl function looks anything like this this should work just fine :D

function OpenUrl(url){
    window.location = url;
}

btw: why returning false on click??

Answer 2

Just use window.location = 'some url'

$('#Test').click(function() {
  window.location = 'http://www.google.com'
  return false;
});

To elaborate a bit, window.location is an object with different quite interesting properties, you can read more about it here. In short, it contains the following properties (quoted from the link):

Property    Description                             Example
hash         the part of the URL that follows the    #test
             # symbol, including the # symbol.     

host         the host name and port number.          [www.google.com]:80

hostname     the host name (without the port number  www.google.com
             or square brackets).   

href         the entire URL.                        http://[www.google.com]:80
                                                     /search?q=devmo#test

pathname    the path (relative to the host).        /search

port         the port number of the URL.            80

protocol     the protocol of the URL.              http:

search    the part of the URL that follows the    ?q=devmo
             ? symbol, including the ? symbol.  

Since window.location is an object, it can also contain methods, which window.location does. By using these methods, instead of just assigning a string to the object, you can exert greater control of how the page is loaded, i.e. force a reload from the server or allow the browser to use a cached entry, skip creating a new history point etc.

Here is an overview of available methods:

Method          Description
assign(url)         Load the document at the provided URL.

reload(forceget)    Reload the document from the current URL. forceget is a 
                    boolean, which, when it is true, causes the page to always 
                    be reloaded from the server. If it is false or not specified, 
                    the browser may reload the page from its cache.

replace(url)        Replace the current document with the one at the provided 
                    URL. The difference from the assign() method is that after 
                    using replace() the current page will not be saved in 
                    session history, meaning the user won't be able to use 
                    the Back button to navigate to it.

toString()          Returns the string representation of the Location object's 
                    URL.

You can also open resources in new windows if you want to. Please be aware that some users dislike having links opened in new windows for them, and prefer to having to consciously make this decision themselves. What you can do, however, is to mimic some of this functionality in your click-handler and try to figure out which mouse-button was clicked. If it was the middle-mouse button, then most browsers would open the link in a new window. This won't be exactly the same, since users won't be able to right-click and select 'Open in new window', but it might be good enough. Anyway, here's how to open a resource in a new window:

var WindowObjectReference;

function openRequestedPopup()
{
  WindowObjectReference = window.open(
                  "http://www.domainname.ext/path/ImageFile.png",
                  "DescriptiveWindowName",
                  "resizable=yes,scrollbars=yes,status=yes");
}

You can read a lot more information here

Answer 3

Something like:

 $("#Test").click(function(event){ 
       window.location.href  = "some url"; 
       event.preventDefault();
 });