Thread

Lets say you have your main content and a sidebar.  You click on a link on the sidebar and it dynamically loads content into the main section without changing pages/url’s.

this is JS yes?  or is it AJAX?

Either way I’m new to both and don’t even know what this function is called.  I’m guessing it’s an onClick kind of thing.

Thanks

Hi Richard,

Your example reminds of those early web days of framesets where you would set the target of the hyperlink to the target frame in the frameset… ugh, nasty.

The more modern way would indeed be with JS/Ajax. The difference is mostly irrelvant since Ajax IS JavaScript, but you would call it “Ajax” if the new data was loaded from an external source (eg, database) using XMLHttpRequest… whereas you would call it “JavaScript” if the new data was either loaded directly from the JS with something quick and dirty like innerHTML (or some more standards-based alternatives), or if it was simply existing invisible content that was already in the markup and becomes visible via JavaScript.

So your options are:
1. A frameset (pfff!)
2. Hardcoding html inside the JavaScript using innerHTML or alternative DOM methods
3. Hiding/showing existing markup with JavaScript
4. Using XMLHttpRequest (“Ajax”) to call a server-side script which fetches the data from a database and sends that data back to the JavaScript, which in turn interprets that data and updates the relevant part of the page.

Everyone these days seems to be evangelising about jQuery ... and I’m one of them!! JS/Ajax is a breeze with jQuery, and you don’t have to worry about the browser inconsistencies around using XMLHttpRequest. If you don’t mind adding 16k to your page size by including the jQuery library I’d recommend it, especially if you’re unfamiliar with JS.

You should be careful of using any of these techniques though, as they will all significantly impair your search-engine rankings, making the content inaccessible to both Googlebot and also non-JS enabled users. You should have a non-JS fallback which would simply load the data into a brand new page via a regular href. Again, jQuery makes this kind of unobtrusive JavaScript really easy.

Hope this helps and was not too detailed.

James

Absolutely brilliant..  never too many details, just wanted to say thanks now because it will take me a few to figure out which I should use.  I figure I’ll use an embed=“site/bitname” tag to help keep things tidy.

Also, thanks for the tip on the searchability aspect.  That’s a biggie.

A part of me wonders if this is way too much work for the effect but I figure it will be a good thing to know and give me some kind of start into js.

till next time,
thanks