CODEWITHSUNDEEP
phphtmlajaxhyperlink
user4009883
user4009883

Reputation:

Prevent Jump to Top of Page When Clicking Link

I have been stuck on how to prevent jumping to the top of the page when clicking on a link that has parsing PHP data.

I have tried so many AJAX examples off the internet, but unfortunately with no success.

A link looks like this:

<a class="bottle" href="index.php?step=<?php echo$step; ?>&bottle=b0"><img class="bottle" src="images/b0.jpg" /></a>

...with there being 113 of these links, each staying on index.php?, but jumping to the top of the page when clicked.

A preview of the program is: http://www.mtschools.net/aurasoma

Upvotes: 0

Views: 924

Answers (2)

HelpNeeder
HelpNeeder

Reputation: 6490

User a link without HREF, and then set CSS cursor to be pointer either with jQuery or CSS.

This to make clickable sort of link. Not entire solution to your problem.

But you could also have an anchor with the name, so when you click, you will move to the anchor and perhaps stay on the anchor, instead of the top of the page?

<script>
    $().ready(function() {
        ('#link').css('cursor', 'pointer');
    });
</script>

<a id="link">Some Text</a>

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

You just need to use the preventDefault(); method in javascript to stop the browser from following through with the anchor links href location.

<script type="text/javascript">
    var links = document.querySelectorAll('.bottle');
    for(var i = 0; i < links; i++){
        links[i].addEventListener('click', function(e){
            e.preventDefault();
            //alternatively return false;

            //the rest of the ajax code here.
        });
    }
</script>

Whatever ajax call you need to make can be done after //the rest of the ajax code here.

Upvotes: 3

Related Questions