HTML Navigation, Ajax but compatible with JavaScript Disable - php

Question

I have a navigation system that I wanted to make compatible with both javascript disabled clients and Ajax capable ones.
for now I have dynamic links like "index.php?page=/cat/page.php" generated inside navigation.
<li id="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>
so when index has "page" variable, it loads that page inside main container.
but I also like to make it load onclick with ajax(jquery included). so I added this code:
$(document).ready(function(){
$('li #sidebaritem').click(function() {
//Page Load code goes here
});
});
This is not working, because as I click the link, right after li->click occurs it redirects to page which Anchor tag is pointing to(of course it dose).
I had spent some time looking for a tutorial on this subject but I found nothing useful.
How can I make it work?
Is this good from SEO Point of view?
I saw this article using hash, Is this good for SEO and if it is how can I make it work on Java Disabled machines?
Sorry for poor English, I'm new in this subject and I'm learning as I go.

Answer 1

First of all Java and JavaScript are two separate things and you're working with JavaScript. Second of all you should replace id="sidebaritem" with class="sidebaritem" unless the id's are unique, but from your given code I don't think it is. Also in jQuery and CSS (which is where the selectors are coming from) if you use li space #id it means that you're trying to select a child element of li with an id #sidebaritem. So you might do li#sidebaritem or if the id's aren't unique li.sidebaritem
So you should try:
<li class="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>
and
$(document).ready(function(){
$('li.sidebaritem a').click(function() {
$("#your-main-container").load($(this).attr('href'));
return false; //prevent click from redirection
});
});
About the SEO part:
These links aren't SEO friendly, because they don't contain the keywords of the title/description of your page (As far as I can tell). To improve the site performance in search engines you'll need to replace these with something like /cat/this-is-my-amazing-seo-friendly-page/. So you might want to replace the url (which will be rendered from the title) of the page into a SEO friendly . Here's a little snippet of code that will do the job.
function replaceLink($url) {
$url = preg_replace("/[^a-zA-Z0-9\-\s]/", '', $url); //find any other symbols than letters or numbers and replace them with an empty string
$url = preg_replace("/\s+/", '-', $url); //find all spaces and replace them with a dash
return $url;
}
So if you've got a page title: This is my amazing SEO friendly page pass it into this little function like this:
$link = replaceLink("This is my amazing SEO friendly page");
and you'll get This-is-my-amazing-SEO-friendly-page
Obviously this is just one of the basics for improving On-site SEO. You can read more about On-site seo here
Also. From the search engine perspective your AJAX page load will have no impact as long as the real links are specified in the menu and they work without JavaScript enabled.
Hope this helps