How to view a different category without reloading the page?

mystore · Post by **mystore** » Sat Nov 24, 2007 9:08 pm

Hi,

How do I set up my website so that when a customer clicks on a category link, it'll take him directly to the category page WITHOUT reloading the entire page? Or for that matter, if a customer clicks on a product link in a category page, it'll take him directly to the product page WITHOUT the reload.

I'm really trying not to use the iframe method. Any advise would be appreciated. Thanks!

- Mike

AbleMods · Post by **AbleMods** » Sun Nov 25, 2007 10:19 am

Mike,

I'm not sure that would be possible. The site programming would have to be written completely in client-side code. Many, many things have to happen on the back-end to render a category or an individual product.

Even with the iframe method, the server round-trip postbacks would still occur. Your postback issue would just move from the main webpage into the iframe tag window.

If you are trying to add specific category pages to your own menu system, that's pretty easy. Just copy/pasted the final URL on the store page into your menu code. As long as the category isn't deleted and re-added, the custom menu of categories will always work.

Even Target.com and their millions in web development budget can't accomplish it.

mystore · Post by **mystore** » Sun Nov 25, 2007 10:50 am

Thanks Joe. I found a tutorial here if anyone's interested:
http://homepage.mac.com/kevinmarks/staticjah.html

i can get the category to load without refreshing using the method above.

But the difficult part is to enable the code to be applied to all the products in your database. The link to those products have to be structured like so...

Code: Select all

<a href="javascript:jah('kevin.html','target');">kevin</a>

...in order for it to load without refreshing. I'm sure that's just one of the many methods out there.

In either case, I think it has to be programmed in the template somewhere. If anyone here has done it before and know of an easier way to set it up, I'm all ears.

jmestep · Post by **jmestep** » Sun Nov 25, 2007 1:51 pm

It's sounding like you want to use Ajax or toggle a hidden div?
You can use some of the scripts from dynamicdrive.com for example.
Something like this?
http://www.anythingxtreme.com/--- click on Info on Xtreme Paintball
http://www.anythingxtreme.com/Planet-Ec ... C1338.aspx
Click on some of the buttons to the right of the image- that was done using dynamic code with Able code.

mystore · Post by **mystore** » Sun Nov 25, 2007 2:16 pm

Thanks Judy. Your're right, Dynamicdrive.com has a lot of neat scripts, I'm going to check them out.

Post by **Logan Rhodehamel** » Tue Nov 27, 2007 10:28 am

Keep in mind to think how it will look to a search engine spider, or how you will handle that if it is important to you.

Code: Select all

<a href="kevin.html" onclick="jah('kevin.html','target');return false;">kevin</a>

Might also work and still be spider / non-js friendly.

We have done a lot of work with Ajax and I have come to dislike aspects of it. For example, it doesn't play nicely with the browser back button.