Solved

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

Posted on 2006-11-17
7
331 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
  • 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wrapper for APPs 9 76
hosting images 4 29
JavaScript behaviour different on local machine and network share 11 50
Un-Indent Setting Notepad++ 2 7
Read about why website design really matters in today's demanding market.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

777 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