• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

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 - http://domain.com/dir/file.cfm (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:

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

0
gr1z
Asked:
gr1z
8 Solutions
 
leakim971PluritechnicianCommented:
Use an Ajax framework, for example : http://labs.adobe.com/technologies/spry/
0
 
SidFishesCommented:
This is the kind of thing that fusebox http://fusebox.org/go/getting-started/what-is-fusebox does very well -  not specifically ajax but it is an option.
0
 
hieloCommented:
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.
http://jqueryfordesigners.com/enabling-the-back-button/
http://benalman.com/projects/jquery-bbq-plugin/

Regards,
Hielo
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
tim_csCommented:
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.  
0
 
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.
0
 
bachsteinCommented:
Create something like a Master Page, where you define the structure of the layout, then using jquery's load

$('#mainContent').load('ajax/test.html');

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 (){

$('#mainContent').load('ajax/test.html');

});

Open in new window


in order  to invoke the load.

Good luck.
0
 
BadotzCommented:
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 http://www.over-engineering.com to see an Ajax-based website in action.
0
 
gr1zAuthor Commented:
bachstein:

how would you handle updating the URL and deep linking into the site with that method?
0
 
bachsteinCommented:
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


cheers

0
 
Gurpreet Singh RandhawaWeb 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

Chers
0
 
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.  

http://balupton.com/projects/jquery-ajaxy

Any ideas along this line?  

Also, I know the recent 'gawker.com' 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.  
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now