[rb] Load all forms/links within tabs in the same place with jquery

One of the things that probably most of the people stumbled upon while working with jquery tabs is reloading the content of a form submit/link within the same window/tab window. That’s pretty simple to achieve with the following code:

//this one will work for forms
$("#tabs form").live( 'submit' , function() {
		var self = this;
		$.ajax({
		  type: (!$(this).attr('method') ? 'post' : $(this).attr('method')),
		  url: $(this).attr('action'),
		  data: $(this).serialize(),
		  success: function(data) { $('.ui-tabs-panel:visible').html(data); }	 
		});
		return false;
	});
//this one will work for links
$("#tabs > div a").live( 'click' , function() {
		var self = this;
		$.ajax({
		  type: 'get',
		  url: $(this).attr('href'),
		  success: function(response) { $('.ui-tabs-panel:visible').html(response); }	 
		});
		return false;
});

While there might be some other implementations with a smoother code, this will do what is supposed to …

2 thoughts on “[rb] Load all forms/links within tabs in the same place with jquery”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>