This will look for forms and anchors with a class of "load_in_main_area" and load them into the element with an ID of "main_area" when they are submitted or clicked on, respectively.
$(document).ready(function() {
// Load URLs in elements as necessary
$('a.load_in_main_area').live('click', function() {
url = $(this).attr('href');
$('#main_area').load(url);
return false; // Don't follow the link
});
$('form.load_in_main_area').live('submit', function() {
url = $(this).attr('action');
data = $(this).serialize();
$.ajax({
data: data,
success: function(returnData) {
$('#main_area').html(returnData);
},
type: 'POST',
url: url
});
return false; // Don't follow the link
});
});
Similarly, this will look for anchors with a class of "modal" and load them into a modal window, in this case ColorBox.
$(document).ready(function() {
// Colorbox (modal) links
$('a.modal').live('click', function() {
$.fn.colorbox({
href: $(this).attr('href')
});
return false; // Don't follow the link
});
});
These are simply tricks I've learnt during my years as a web developer. They may not be the best solutions. Please e-mail me any bugfixes or improvements to these examples. Thank you.