Alternatives for using "#" in href attribute

Question

The <a> tag is used to create hyperlinks but in this age of jQuery and Ajax we are using it to load HTML into <div>s in the same page as the <a> tags.

That said, we set the href atribute as href="#", using or rather abusing the # character as a placeholder along with some undesirable side effects like the URL getting appended with the # character.

And if you leave the href attribute blank href = "", the link does not seem to work.

Is there anyway to do this in a cleaner way like showing some text or dummy function in the status bar of the browser when the user hovers over the link and yet make the link do what the programmer intended?

Here's my code.

<ul id="sidebarmenu1">
   // List that is converted into a menu... 
   <li> <a href="#" id="loadHotel" > HOTEL </a> </li>
   <li> <a href="#" id="loadCountry"> COUNTRY </a> </li>
   <li> <a href="#" id="loadCity"> CITY </a> </li>
</ul>

// The jQuery to load content into another div with Ajax
var loadUrl = "createHotel.php";
$("#loadHotel").click(function() {
    $("#mainContent").html(ajax_load).load(loadUrl);
}); 

// ajax function to load hotel ---> rooms page 

var url_loadRooms = "viewRooms.php";
$("#createRooms").click(function() {
    $("#mainContent").html(ajax_load).load(url_loadRooms);
});

What else can I use instead of "#" to make my code neat..?

Answer 1

The best solution is to not use some dummy placeholder at all. Use a meaningful URL which, if the link were actually followed, would show you the information you'd get from the AJAX request.

I do this regularly with my web apps, using Javascript to enhance a working site. For example, the HTML:

<a href="/users/index" rel="popup">View users</a>

The Javascript (jQuery):

$('a[rel*="popup"]').click(function() {
    loadPopup({    // whatever your favourite lightbox is, etc..
        url: this.href
    });
    return false;
});

The benefits of this are numerous. Your site is accessible to screen readers, web crawlers and users with javascript off, and even those with javascript turned on will get a meaningful URL in their status bar, so they'll know where they're going.