Best practices question: using AJAX + JQUERY to update content in <div>

[ThisisForReal]

I'm fairly new to using AJAX and JQUERY to call back to the server, process a form's contents, and then update a div file accordingly.  This new project has almost everything in a single div (id="mainContent").  This is the <div> that I will be updating through the ajax call.

 

My div has a lot of different hyperlinks at the moment (text, image, and form submit button).  I know how to do an update for a page that has a single form with a single submit button.  In order to turn my site into an ajax driven site, should I take all these image links and wrap individual forms around them?  What about the text links?  It all seems very cumbersome and I'm curious how you experts would tackle the issue.

 

Any assistance on best practices would be greatly appreciated!  Thanks in advance.

 

 

[smoseley]

The simple way to implement AJAX to load content in a div is:

$('#mainContent').load('/path/to/content');

[haku]

In order to turn my site into an ajax driven site, should I take all these image links and wrap individual forms around them? What about the text links?

Definitely not. You shouldn't be adding any extra markup at all for AJAX. What you need to do is add onclick listeners to each of your links, with a javascript function that will call the data from the server when those links are clicked.

 

It all seems very cumbersome and I'm curious how you experts would tackle the issue.

It is definitely cumbersome, which is why you see few sites that are fully ajax driven. I did my site fully ajax, but it was a lot of work to set it all up to work properly, and I've been using Ajax for near 5 years now.

 

Good luck!