I want to use inline loading (via AJAX) on my website, while at the same time preserving (some) functionality for people without access to Javascript (if they still exist).

My menu's:

<?php
echo "<h3 id='title'></h3>";
if (empty($_SESSION['uid'])) {
    echo "<a href='index'>Home</a> <br> ";
    echo "<a href='register'>Register</a> <br> ";
    echo "<a href='login'>Log In</a> <br> ";
    echo "<a href='browser'>Browse MarketPlace</a> <br> ";
    echo "<a href='support'>Support us!</a>";
}
elseif (!empty($_SESSION['uid'])) {
    echo "<a href='index'>Home</a> <br> ";
    echo "<a href='overview'>Account Overview</a> <br> ";
    echo "<a href='browser'>Browse MarketPlace</a> <br> ";
    echo "<a href='sell'>Sell Items</a> <br> ";
    echo "<a href='logout'>Logout</a> <br> ";
    echo "<a href='support'>Support us!</a>";
}
?>

My Javascript:

$(document).ready(function() {
    $(document).on("click", "a", function(event) {
        var dataUrl = $(this).attr("href");
        if (dataUrl != "") {
            loadPage(dataUrl);
        }
        return false;
    });
});

Is this the correct way to do it? I am especially worried about the need to block the original a href call, the native browser one.

It has worked entirely fine when I used something custom like <a data-url='index'>. Then I tried the new version and it did not work as expected without return false;, but now it does, so I'm not too sure about that.

I want to use inline loading (via AJAX) on my website, while at the same time preserving (some) functionality for people without access to Javascript (if they still exist).

My menu's:

<?php
echo "<h3 id='title'></h3>";
if (empty($_SESSION['uid'])) {
    echo "<a href='index'>Home</a> <br> ";
    echo "<a href='register'>Register</a> <br> ";
    echo "<a href='login'>Log In</a> <br> ";
    echo "<a href='browser'>Browse MarketPlace</a> <br> ";
    echo "<a href='support'>Support us!</a>";
}
elseif (!empty($_SESSION['uid'])) {
    echo "<a href='index'>Home</a> <br> ";
    echo "<a href='overview'>Account Overview</a> <br> ";
    echo "<a href='browser'>Browse MarketPlace</a> <br> ";
    echo "<a href='sell'>Sell Items</a> <br> ";
    echo "<a href='logout'>Logout</a> <br> ";
    echo "<a href='support'>Support us!</a>";
}
?>

My Javascript:

$(document).ready(function() {
    $(document).on("click", "a", function(event) {
        var dataUrl = $(this).attr("href");
        if (dataUrl != "") {
            loadPage(dataUrl);
        }
        return false;
    });
});

Is this the correct way to do it? I am especially worried about the need to block the original a href call, the native browser one.

It has worked entirely fine when I used something custom like <a data-url='index'>. Then I tried the new version and it did not work as expected without return false;, but now it does, so I'm not too sure about that.

• javascript
• jquery
• html
• href

• 1 api.jquery./event.preventDefault – Blazemonger Commented Dec 5, 2013 at 17:04
• 2 use event.preventDefault() – Pranav C Balan Commented Dec 5, 2013 at 17:04

2 Answers 2

use event.preventDefault();

If this method is called, the default action of the event will not be triggered.

$(document).ready(function() {
        $(document).on("click", "a", function(event) {
           event.preventDefault();
            var dataUrl = $(this).attr("href");
            if (dataUrl != "") {
                loadPage(dataUrl);
            }

        });
    });

Try using

event.preventDefault()

This cancels the event if it is cancelable, without stopping further propagation of the event.

Refer event.preventDefault()