How can I use AJAX without going back to the top of the page?

pyramation · 08-19-2008, 02:19 AM

How can you use AJAX and an <A HREF tag and keep the page where it is, without going up to the top... and without using an <a name="somename">??

Code:

<a href="#" onclick="somefunction()"> Click Here </a>

A1ien51 · 08-19-2008, 04:03 AM

Has nothing to do with Ajax. Just basic JavaScript canceling the default action of an element.

Code:

onclick="foo();return false;"

Eric

pyramation · 08-19-2008, 07:06 AM

Thanks for the reply! Much appreciated, but I still didn't get it to work quite yet... this is what I have:

Code:

<a href="#" onclick="somefunction();return false;"> Click Here </a>

The page still bounces back up to the top. If I remove the "#" from the href, then the function doesn't execute.

Any help is greatly appreciated.

rnd me · 08-19-2008, 08:16 AM

use

Code:

<input type="button" onclick="somefunction();" value="Click Here" />

to denote an action. links are for documents, buttons do stuff.

A1ien51 · 08-19-2008, 12:35 PM

If it is still going to the top, it sounds like you might have an error in your function.

pyramation · 08-19-2008, 04:09 PM

The function could possibly have an error... its actually the function that was posted on "IE problems IE errors on page with AHAH", and I basically had separate issues with the same code.
The computer that produced that error is unavailable right now ( it was not mine ) ... so I should get the error message soon.

Thanks for all the replies!

rnd me · 08-19-2008, 07:55 PM

try onclick="this.href=location.href; somefunction();return false;"

you could also use onmousedown instead of onclick to cut the click off by about 100ms.

if you are worried about an error in the function, rethread the stack by using settimeout:

onclick="this.href=location.href; setTimeout(somefunction, 35); return false;"

pyramation · 08-19-2008, 10:19 PM

Still didn't work, but the onmousedown is faster... thanks1

SSJ · 08-20-2008, 07:22 AM

You can use <label> instead of <a> to get it working

A1ien51 · 08-20-2008, 01:32 PM

Quote:

Originally Posted by rnd me

try onclick="this.href=location.href; somefunction();return false;"

you could also use onmousedown instead of onclick to cut the click off by about 100ms.

if you are worried about an error in the function, rethread the stack by using settimeout:

onclick="this.href=location.href; setTimeout(somefunction, 35); return false;"

Why in the world are you telling him to set the href of the link to the current page?

Eric

rnd me · 08-20-2008, 08:01 PM

because he doen't want the link to do anything, and didn't care to follow it.
was thinking to use hash, but then what about the first visits....

if the link goes to where he already is, nothing will happen (was the theory).
i know it's unconventional, but my first two guesses didn't work.
rethinking about it, i bet some browsers will re-nav though if the link is an absolute url...

this is a prime example of why not use an 'a' tag for javascript actions, but hey, OP was determined.

its still not working, so if you have any suggestions, please feel free to share.

perhaps try:

Code:

onmouseover="this.href='javascript:void(0)' "
onclick=" somefunction(); return false;"

i still don't know why it's following the links in the first place, so that's just a stab.

you can also style a span to look like an a tag and use it instead. that would work for sure.

pyramation · 08-21-2008, 12:06 AM

I tried using span and label tags, no luck there, same behavior.
<br>
I tried:

Code:

onmouseover="this.href='javascript:void(0)' "
onclick=" somefunction(); return false;"

didn't work either...did you mean to put both of those in the same a tag? Thats what I did. Like this:

Code:

<a onmouseover="this.href='javascript:void(0)' " onclick=" somefunction(); return false;">

rnd me · 08-21-2008, 09:40 AM

post the code to somefunction().

it has to be something in that function.
there is nothing that a span tag would do to cause the behavior you describe.

i was wondering why the a tag wasn't working correctly...

SSJ · 08-21-2008, 12:31 PM

Use Following:

Quote:

<label onclick="somefunction()"> Click Here </label>

rnd me · 08-21-2008, 10:31 PM

please don't use the label tag for this. while it may work, as almost any other tag would, it is bad practice.

<label> tags are use to extend the focus grabbing of form elements.
that is all they are supposed to be used for.

why?

people with certain disabilities use software that interprets <label>s to mean that data goes to the input in the for attrib of the label.

you are possibly making the page confusing for these users by arbitrarily using it where a button, link, or input would make a lot more sense.