Best way to make a complete AJAX site (ajax page loading)

I am looking for the best way to have AJAX page loading in an administration system I am building.

For example, I would like to have the header static, but then load new 'pages' into the content section.  I do not want to use iFrames for various reasons.  I would like to have the scrollbar behave 'normally' (scrolling the whole page and not just the content div).  I would also like to preserve the back button and also allow deep linking through the URL.

For example being able to access a page like - (if i have to use # or #! that is fine too).

I have been reading a lot of different approaches for this and just wanted to see if there is any agreement on the best approach.  I am using coldfusion, but I think i would prefer to stick with Jquery (maybe) instead of the built in coldfusion stuff, unless it really is the best way to go.

Any good tutorials out there or any tips you can offer?

Here is an example of kind of what I am talking about:

Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
Use an Ajax framework, for example :
SidFishesConnect With a Mentor Commented:
This is the kind of thing that fusebox does very well -  not specifically ajax but it is an option.
hieloConnect With a Mentor Commented:
My suggestion is to stick with jQuery. Down the road you may need to enhance your site and depending on the new "widgets" you want to add, you may already find it somewhere.

The main issue that you may run into is the back button. I bookmarked this articles sometime ago. I must admit I have not tested them, but it may be worth investigating.

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

tim_csConnect With a Mentor Commented:
Is this a specific requirement for some reason or just something that you want to do?  A co-worker did this same thing and has regretted it.  It's much harder to maintain and harder to work with JavaScript for each page.  

AJAX is great and has it's uses but in my experience it should be used only in certain places.  Just my opinion.  
gr1zAuthor Commented:
Hi Tim,

This is definitely not a requirement.  We are actually pretty far along in the development here too.  The main reason I started thinking of doing this is because we recently implemented a 'page loading' effect for all of the pages where the current page fades out and the next page fades in.  It works well, but is sometimes inconsistent between browsers.  I was just thinking since we are including the header on each page anyway for navigation, that an ajax page load might be a better solution.

Basically how we do it now, is when a link is clicked we use jquery to show a loading div over the content area and after the next page is loaded we fade out the loading div.  This might be getting away from the scope of this question though.
bachsteinConnect With a Mentor Commented:
Create something like a Master Page, where you define the structure of the layout, then using jquery's load


Open in new window

update only the mainContent div that will change on each click. Add the click event to the menu

for example

$('#menuItem').click(function (){



Open in new window

in order  to invoke the load.

Good luck.
BadotzConnect With a Mentor Commented:
For my website, I use a JSON structure to determine how each page should look.

Granted, this is just a site I use for testing various projects, and it is by no means a popular spot on the net, but it demonstrates a site that does what you are thinking of doing.

There is a single HTML page that controls the site, and JavaScript to yell at the Server. She shouts back a webpage built from the JSON template, and the Client pastes it into view.

I have no issues with maintenance, as some have suggested, nor do I have any regrets about this. Ajax is great, and it can turn a web page into a web application, which was the ultimate goal in the development of my site.

Visit to see an Ajax-based website in action.
gr1zAuthor Commented:

how would you handle updating the URL and deep linking into the site with that method?
bachsteinConnect With a Mentor Commented:
About the URL, I am not sure, cause really, the request is going now via Ajax, so there is no URL for the browser to re-load.

Regarding links within the pages, well is pretty much the same. What I do is I install a js to be called on document ready. Add some parameters to the url, for instance use the id.

<a id="product_3451_leftContainer" class ="ajax_call"> see details </a>

Open in new window

on document ready find all ajax_call elements and install the click, similar to the previous response

when you do the ajax call send the id as parameter to know what to retrieve and where to place it


Gurpreet Singh RandhawaConnect With a Mentor Web DeveloperCommented:
I have created one AJAX based website, Purely using ajax funtionality and i used Coldfusion's 8 AJAX functionality & a bit of jquery, this made a site heavier as CF8 uses lot os EXT but after all i made it

gr1zAuthor Commented:
ok i have done some more research.  i found a jquery plugin that does what i am wanting, but it seems a little bloated.

Any ideas along this line?  

Also, I know the recent '' redesign caused a lot of problems for them, but for my purposes something similar to what they are doing is exactly what i am after.  
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.