How can I use jquery tabs, ajax, and dynamic content pages? Postback goes back to main page instead of content page

Question

Problem: Postbacks are causing eventtarget errors because they are going back to the aspx page where the tabs are defined instead of going to the href page.

I have a main page called Default.aspx. On it is the setup for the jquery tabs using ajaxoptions.

Default.aspx javascript for tabs:

<script type="text/javascript">
       // Tabs
  $(function () {
      $("#tabs").tabs({
          ajaxOptions: {
              error: function (xhr, status, index, anchor) {
                  $(anchor.hash).html(
  "Couldn't load this tab. We'll try to fix this as soon as possible. ");
              }
          }

      });
  });

      </script> 

The code for making the tabs in Default.aspx:

<div id="tabs">
<ul>  
    <li><a href="main.aspx"><span>Properties</span></a></li> 
    <li><a href="lists.aspx"><span>Edit Lists</span></a></li></ul></div>

On the lists.aspx page I have controls such as a dropdown with an onselectedIndexChanged event set to postback. The problem is the postback goes to Default.aspx instead lists.aspx. The code to handle the postback is written in lists.aspx.cs.

<asp:DropDownList ID="ListsDropDownList" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="ListsDropDownList_OnSelectedIndexChanged"></asp:DropDownList>

The dropdown is filled during the page load of lists.aspx. How can I get the postback to go to lists.aspx instead of back to the Default.aspx? I tried using IFrames and it worked great for postback issue but not for dynamic loading of pages. It loaded all pages up front which is not ok.

Any help is greatly appreciated. I know this has to be possible otherwise anyone using jquery and asp.net would have one huge back end .cs file.

Answer 1

在标签click上使用javascript设置iframe的src属性，这样，iframe仅在设置了src时才加载，这是一种动态加载。