Solved

Issue with <a href='#' onclick=callfunction()>Click me!</a>

Posted on 2006-11-17
7
334 Views
Last Modified: 2012-08-14
Alright, I'm not really sure if I'm doing any of this the right way but here's what I've done...

I've created an AJAX web page and would like to use regular <a> links as the controls to modify the data on the page. I can do this by using
<a href='#' onclick='callfunction()'>Click me!</a>

Only problem is because I have the '#' symbol for the href it pops me back up to the top of the page. If I take the '#' out of the href then the onclick function does not get called.

What I'm looking for is a way to use <a> tags to call an onclick javascript function without distruption page orientation.

If I use buttons to do this
<input type='button' value='Click me' onclick='callfunction()'>

It works exactly how I'd like it to, minus the buttons look completely out of place with the rest of the site.

Any ideas?
0
Comment
Question by:kasualcom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 3

Author Comment

by:kasualcom
ID: 17966264
Ok, I spoke to soon, I can get it to work, but now my only problem is my css code for <a> tags does not apply to it any thoughts on that?

To get it to work I took out the href='' completely.
0
 
LVL 5

Expert Comment

by:karlsfre
ID: 17966312
Just a few quick questions:

What does your CSS like?
Does the CSS style get applied for other <a> tags on the page?
What browser do you use?
0
 
LVL 3

Author Comment

by:kasualcom
ID: 17966344
CSS:

a:link {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:active {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
a:visited {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:hover {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}

It does work for the other  <a> tags

I'm currently using FireFox 2.0
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 5

Accepted Solution

by:
karlsfre earned 500 total points
ID: 17966503
Try adding another entry to CSS:

a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
0
 
LVL 6

Expert Comment

by:rockymagee
ID: 17966513
If you copy and paste this into a balnk .htm or whatever page it seems to work fine:

<style type="text/css">
<!--
a:link {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:active {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
a:visited {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:hover {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
-->
</style>
            
      
<body>
<a href='#' onclick='callfunction()'>Click me!</a>
</body>
0
 
LVL 6

Expert Comment

by:rockymagee
ID: 17966545
As far as not disrupting the page orientation I think you are going to have to submit the function via a form like so:

<form action="#" onsubmit="callfunction()">
<!-- Use your link to submit the form -->
</form>

Be sure to put the <form> tags outside on any table rows if you are using HTML table tags ...
0
 
LVL 3

Author Comment

by:kasualcom
ID: 17966554
Thanks a lot , it does exactly what I'd like it to do, and very very simply.
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question