TabContainer paging using javascript and update panels
I am trying to create a Ajax Toolkit TabContainer which has Previous and Next links on each tab. I have added update panels to each tab container in an attempt to get from one tab to the next without postback. With the code show below, a page reload is NOT being fired as I click tab headers (GOOD), but it IS being fired when I click the imagebuttons for previous and next(BAD). (See the pageLoad function).
Note that each imagebutton has an ID, UpdateMode is Conditional, and ChildrenAsTrigers is false. My site.master has an ajaxscriptmanager.
Is there any straightforwared way to page through tabs via imagebuttons without postback each time? Thanks.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
开发者_运维知识库 function MoveTab(num) {
var container = $find('<%=TabContainer1.ClientID %>');
container.set_activeTabIndex(num);
}
function pageLoad(sender, args) {
alert("pageload fired");
}
</script>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="940">
<ajaxToolkit:TabPanel ID="TabPanelIntro" runat="server" HeaderText="Introduction">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel0" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<asp:Label id="Label1" runat="server" Text="Tab 0"/>
<asp:ImageButton ID="Next0" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next" OnClientClick="MoveTab(1);" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanelProgram" runat="server" HeaderText="Program">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<asp:Label id="Label2" runat="server" Text="Tab 1" />
<asp:ImageButton ID="Next1" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next" OnClientClick="MoveTab(2);" />
<asp:ImageButton ID="Prev1" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous" OnClientClick="MoveTab(0);" CssClass="formpager" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanelSubmit" runat="server" HeaderText="Final">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label id="Label13" runat="server" Text="Tab 2" CssClass="allcaps" />
<asp:ImageButton ID="Prev2" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous" OnClientClick="MoveTab(1);" CssClass="formpager" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</asp:Content>
Just add a return false after you call your client function to avoid the postback. I just try it and it worked
<act:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="940">
<act:TabPanel ID="TabPanelIntro" runat="server" HeaderText="Introduction">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel0" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Tab 0" />
<asp:ImageButton ID="Next0" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next"
OnClientClick="MoveTab(1);return false;" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</act:TabPanel>
<act:TabPanel ID="TabPanelProgram" runat="server" HeaderText="Program">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label ID="Label4" runat="server" Text="Tab 1" />
<asp:ImageButton ID="Next1" runat="server" ImageUrl="~/_img/next.png" ToolTip="Next"
OnClientClick="MoveTab(2); return false;" />
<asp:ImageButton ID="Prev1" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous"
OnClientClick="MoveTab(0);return false;" CssClass="formpager" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</act:TabPanel>
<act:TabPanel ID="TabPanelSubmit" runat="server" HeaderText="Final">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label ID="Label13" runat="server" Text="Tab 2" CssClass="allcaps" />
<asp:ImageButton ID="Prev2" runat="server" ImageUrl="~/_img/prev.png" ToolTip="Previous"
OnClientClick="MoveTab(1);return false;" CssClass="formpager" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</act:TabPanel>
精彩评论