AJAX Pagination number click event using A tag

[afridy]

Hai folks

i have a small report generated at the bottom of a page.
it has pagination numbers. all these ajax generated.
now the pagination numbers have the following code.

echo "<a href=\"#\" id='$i' class='pagenum' onclick='ajaxpost_rep_gen($i);change($i)'/>" . $i . "</a>" . "&nbsp;&nbsp;";

notice that for hreaf i have put #.

now my problem is, when click a pagination number, the page is scrolled to the top of the page.
so each time when click a pagination number at the bottom, user have to scroll down to see the report's next page.

screen shot of the report :

[sdleihssirhc]

I don't have a lot of experience with inline event handlers, but I believe this is an easy fix. Two main solutions:

• Change the href to "javascript:void(0)", or
• Add "return false" to the end of the "onclick" code.

Do either of those help?

[paul_wilkins]

I don't have a lot of experience with inline event handlers, but I believe this is an easy fix. Two main solutions:

• Change the href to "javascript:void(0)", or
• Add "return false" to the end of the "onclick" code.

Do either of those help?

Doing the first option is a definate no-no, because the "javascript:" part is only an unused label (it does not specify that you're using javascript) and it won't mean anything when scripting is not available.

Go with the second option, which ensures that when clicking on the link, the browsers default behaviour doesn't not occur.

[afridy]

Doing the first option is a definate no-no, because the "javascript:" part is only an unused label (it does not specify that you're using javascript) and it won't mean anything when scripting is not available.

Go with the second option, which ensures that when clicking on the link, the browsers default behaviour doesn't not occur.

all i can say is ur a genius paul !!!

echo "<a href=\"#\" id='$i' class='pagenum' onclick='ajaxpost_rep_gen($i);change($i);return false;'/>" . $i . "</a>" . "&nbsp;&nbsp;";

both method worked charm. i stick with the above method as per ur advise.

Thank you!

[sdleihssirhc]

Doing the first option is a definate no-no, because the "javascript:" part is only an unused label (it does not specify that you're using javascript) and it won't mean anything when scripting is not available.

Can you explain a little bit more what you mean by "it won't mean anything when scripting is not available"? Are we just talking semantics, here? When I tried "javascript:void(0)" in Chrome, Firefox, and IE (all with JS disabled), they didn't try to load a new page; they all seemed to recognize that JS was trying to execute, and prevented it... which prevented any action from being taken.

[paul_wilkins]

Can you explain a little bit more what you mean by "it won't mean anything when scripting is not available"?

Sure thing.

If void were doing something useful, it wouldn't carry on to have its effect when you disable javascript. Void is not doing what you have been mislead in to believing what it does.

Use just "javascript:" as the href property and you'll find that the same lack of behaviour occurs. It has nothing to do with void at all.
Void just leads to confusion because people have no idea of what is happening, or why. Here's some info too about void, a bad part or javascript.

It's better to use techniques that make it easier to understand what is going on. Returning false from the onclick event serves that purpose nicely.
The other reason to use the return false from the onclick event is that it allows you to cleanly separate the scripting from the content.