Jquery ui tabs redirect to aspx page on back side

Question

When submitting the form, I get redirected to the actual aspx page. How to avoid redirection.

Tabs.aspx

<div id="container-1"> <ul> <li><a href="Survey.aspx?group=1"><span>HR</span></a></li> <li><a href="Survey.aspx?group=2"><span>Sales</span></a></li> <li><a href="Survey.aspx?group=3"><span>Finance</span></a></li> </ul> 

Jquery code in tabs.aspx

 <script type="text/javascript"> $(function() { $('#container-1 > ul').tabs(); </script> 

Survey.aspx

 <form id="form1" runat="server"> <div> <asp:Label ID="lblHeading" runat="server"></asp:Label><br /> <asp:HiddenField ID="hdnGroupId" runat="server" /> <br /> 1) Question 1 <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 2) Another question:  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <br /> <br /> <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" /><br /> <div id="Result">Click here for the time.</div> <asp:Label ID="lblMessage" runat="server"></asp:Label></div> </form> 

Review page Code for

 protected void btnSave_Click(object sender, EventArgs e) { if (groupId > 0) { switch (groupId) { case 1: lblMessage.Text = "HR data is saved."; break; case 2: lblMessage.Text = "Sales data is saved."; break; case 3: lblMessage.Text = "Finance data is saved."; break; default: break; } } } 

Answer 1

Try the following:

  <ul> <li><a href="#group1"><span>HR</span></a></li> <li><a href="#group2"><span>Sales</span></a></li> <li><a href="#group3"><span>Finance</span></a></li> </ul> <div id="group1"><iframe src="Survey.aspx?group=1"></iframe></div> <div id="group2"><iframe src="Survey.aspx?group=2"></iframe></div> <div id="group3"><iframe src="Survey.aspx?group=3"></iframe></div> 

Answer 2

Try this plugin ... http://code.google.com/p/jquery-hijack/