The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 16, 2019, 05:56:21 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Using onclick with anchor tags.  (Read 6747 times)
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« on: April 25, 2007, 10:05:06 AM »


I have a link on my site, but when the user clicks on it I don't want them to go anywhere but I want to do some JS processing. Right now this is the code I have:

Code:
<a href="#" id="myid" onclick="myFunction()">Click Here</a>

Is there something better I can put in the href field? Putting nothing in there seems to reload the page when the user clicks it (this code is on the homepage).
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: April 25, 2007, 11:13:12 AM »

Yup - that's a common issue with doing that. Here you go:

<a href="javascript:" onClick="doSomethingElse()">anchor text[/url]

You can actually put any javascript in the href attribute - putting blank javascript just causes the browser to do a delightful nothing.

/p
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #2 on: April 25, 2007, 01:05:38 PM »

It's now bringing up Firefox's JavaScript Error Console every time I click on the link. The console is empty, but it's still annoying as hell.

Here's the code I'm using (names changed to protect the guilty):

Code:
<a href="javascript:" id="b" onclick="c()">a</a>

Am I missing something?
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #3 on: April 25, 2007, 01:21:45 PM »

Don't think so... holdon - firing up FF...

Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: April 25, 2007, 01:25:35 PM »

... I'ts working perfectly for me... the only way that I get an error is if there's a problem with doSomething() or if I click on doSomething and doSomething() is not defined...

Code:
<html>
<body>

<a href="javascript:" id="blowme" onclick="doSomething()">Testing!</a>

<script>
function doSomething()
{
        alert('here');
}
</script>
</html>
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #5 on: April 25, 2007, 01:32:28 PM »

... also works great in Safari and IE...

What exactly is the error in the FF debug panel?
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #6 on: April 25, 2007, 01:45:51 PM »

That's the thing...there is no error in the console window. It just pops up empty...

Strangely enough, I have my JS printing out some HTML that has the same code, with javascript: in the href and it works without issue.

Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #7 on: April 25, 2007, 02:22:35 PM »

If it's just coming to the foreground, but is coming up empty then I believe that it's a JS thang in FF and not an error. If the JS is behaving the way you expect it and the debug console stays empty I think you're good to go. You might check and see if there are some properties or preferences somewhere that might be set weird...

Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #8 on: April 25, 2007, 02:41:01 PM »

Yes, everything is working fine in both firefox and IE, but this stupid window keeps popping up in FF. I'll test it on the wife's computer tomorrow.

Thanks for the help.
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #9 on: April 25, 2007, 03:20:17 PM »

I can't replicate for anything. It sounds as though FF decides to bring it forward ... but mine isn't doing it at all. Really strange. Looking forward to hearing what it was...

/p
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #10 on: April 26, 2007, 01:40:00 AM »

Figured it out. I had to put javascript:void(0); in the href field.

It was happening on my machine as well as the wife's, so it's not some weird plugin that I have installed. My FF version is:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

I'm not sure what the wife's is, but she never uses it so it's probably a bit old.
Logged

Will code for food.
joebloggs
n00b
*
Offline Offline

Posts: 3


View Profile
« Reply #11 on: April 26, 2007, 11:38:21 AM »

Yup - that's a common issue with doing that. Here you go:

<a href="javascript:" onClick="doSomethingElse()">anchor text[/url]

I'm not a big fan of javascript pseudo-protocols in the href attribute - that should always be a URL.
Instead, why not just cancel the default action of the link with return false? So instead just do:

<a href="aProperUrl.html" onclick="doSomethingElse(); return false">anchor text[/url]

Or, even have the function returning a false value, so the above can be reduced further to:

<a href="aProperUrl.html" onclick="return doSomethingElse();">anchor text[/url]

where

function doSomethingElse() {
  // do something else logic

  // and return a boolean response
  return false;
}
Logged

No links in signatures please
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #12 on: April 26, 2007, 12:41:30 PM »

So the onClick code is executed first, and if it returns false the href is ignored?
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #13 on: April 26, 2007, 02:04:48 PM »

That is correct - a return false will halt the execution of the URL.

But this is my only argument against putting a link there - if a user (like me) pays attention to it, then it looks like the link will go somewhere rather than do something. So you could fool this by putting a completely farsical domain there to "tip the user" about what's going on, or use the JS so that they'll know they are not going anywhere.

Regarding void(0) - that'll work fine as well - you've got me concerned though because I've used the blank javascript href with great success for a while and have never seen that occurrence... or at least have never been told that.

Methinks I need to review that method... thanks C

/p
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!