loading an ASPX page into a jQuery UI Tab with AJAX - asp.net

Question

I have some experience with jquery and regular html pages but only just started learning .net. I have searched everywhere and I cannot find a good tutorial or example of how to load aspx pages into jquery ui tabs with ajax. I have a Main.aspx page which has some jquery ui tabs for navigation. I would like to load the content for each tab with ajax. I have tried to use the Ajax mode of jquery ui tabs but it seems like when the aspx page contains certain web controls it does not load for some reason. The aspx file that I want to load into the tab only has a button control that, when clicked, changes it's text to say "hello".
Here is the tab section of Main.aspx:
<div id="tabs">
<ul>
<li><span>Test</span></li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs-2">Second Tab</div>
<div id="tabs-3">Third Tab</div>
</div>
Here is the the test.aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs"
Inherits="TropicalServerGUI.test" %>
<div>
<asp:button ID="btn" runat="server" text="Button" />
</div>
and its code-behind:
namespace TropicalServerGUI {
public partial class test : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void btn_Click(object sender, EventArgs e) {
//btn.Text = "hello";
}
}
}
the second and third tabs which are static work fine but nothing gets loaded into the first tab. If I were to remove the button control and put, for example, <h1>Hello World</h1> then it loads the page correctly. I know I am doing something completely wrong and I cannot find any website that addresses this topic, so any help with this would be greatly appreciated!

Answer 1

Are you initialising the JQueryUI tabs?
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>