Avoiding pageRefresh for TabContainer RSS

• • Reply
  

  monfu

  Member

  256 Points

  177 Posts

  Avoiding pageRefresh for TabContainer

  Jan 21, 2009 02:52 PM|LINK

  Dear All

  I have a Control Toolkit TabContainer, and everything is working fine, ie I am loading the correct data in the tabs.  However I am trying to elimitate the page refresh when clicking on a Tab.  I have not managed yet

  I have the following code:-

  Javascript:-

      function clientActiveTabChanged(sender, args)
      {
  
          //  if the tab does not exist and it is the active tab,
          //  trigger the async-postback
          if (sender.get_activeTabIndex() == 0) {
              // load tab1
              __doPostBack('btnRecentTrigger', '');
          }
          else if (sender.get_activeTabIndex() == 1) {
              // load tab2
              __doPostBack('btnMostViewedTrigger', '');
          }
          else if (sender.get_activeTabIndex() == 2) {
              // load tab2
              __doPostBack('btnMostPopularTrigger', '');
          }
      }
  

  Hidden buttons to trigger the Click :-

      <input id="btnRecentTrigger" runat="server" type="button" style="display:none" onserverclick="BtnRecentTrigger_Click" />
      <input id="btnMostViewedTrigger" runat="server" type="button" style="display:none" onserverclick="BtnMostViewedTrigger_Click" />
      <input id="btnMostPopularTrigger" runat="server" type="button" style="display:none" onserverclick="BtnMostPopularTrigger_Click" />
   

  TabContianer :-

      <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="linkedin-gray"
          OnActiveTabChanged="TabContainer1_ActiveTabChanged" OnClientActiveTabChanged="clientActiveTabChanged">
          <cc1:TabPanel runat="server" HeaderText="Recent" ID="TabPanel1" >
              <ContentTemplate>
                  <asp:UpdatePanel ID="updTabPanel1" runat="server" UpdateMode="Conditional">
                  <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="btnRecentTrigger" />
                  </Triggers>
                  <ContentTemplate>
                      <asp:PlaceHolder ID="plhRecent" runat="server" />               
                  </ContentTemplate>
                  </asp:UpdatePanel>           
              </ContentTemplate>
          </cc1:TabPanel>
          <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Most Viewed" >
              <ContentTemplate>
                  <asp:UpdatePanel ID="updTabPanel2" runat="server" UpdateMode="Conditional">
                  <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="btnMostViewedTrigger" />
                  </Triggers>
                  <ContentTemplate>
                      <asp:PlaceHolder ID="plhMostViewed" runat="server" />
                  </ContentTemplate>
                  </asp:UpdatePanel>           
              </ContentTemplate>
          </cc1:TabPanel>
          <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Most Popular" >
              <ContentTemplate>
                  <asp:UpdatePanel ID="updTabPanel3" runat="server" UpdateMode="Conditional">
                  <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="btnMostPopularTrigger" />
                  </Triggers>
                  <ContentTemplate>
                      <asp:PlaceHolder ID="plhMostPopular" runat="server" />
                  </ContentTemplate>
                  </asp:UpdatePanel>           
              </ContentTemplate>
          </cc1:TabPanel>
      </cc1:TabContainer>
      <div id="updateProgressDiv" class="updateProgress" style="display:none">
          <div align="center" style="margin-top:13px;">
              <img src="../Images/Common/loadingAnimation.gif" />
              Loading ...
          </div>
      </div>                
  

  Code Behind (part of it):-

          protected void BtnRecentTrigger_Click(object sender, EventArgs e)
          {
                  ListingType = "Recent";
                  LoadControls(ListingType);
          }
  
          protected void BtnMostViewedTrigger_Click(object sender, EventArgs e)
          {
              ListingType = "MostViewed";
              LoadControls(ListingType);
          }
  
          protected void BtnMostPopularTrigger_Click(object sender, EventArgs e)
          {
              ListingType = "MostPopular";
              LoadControls(ListingType);
          }
  

  However these functions are never triggered. 

  Can you guys help me out?

  Thanks

   

  Regards

  Johann
  

• • Reply
  

  rhino_45

  Member

  4 Points

  3 Posts

  Re: Avoiding pageRefresh for TabContainer

  Jan 21, 2009 09:49 PM|LINK

  Try this:

       <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="linkedin-gray"
           OnClientActiveTabChanged="clientActiveTabChanged" AutoPostBack="false">

   I took out OnActiveTabChanged="TabContainer1_ActiveTabChanged" and added the AutoPostBack="false"...

• • Reply
  

  monfu

  Member

  256 Points

  177 Posts

  Re: Avoiding pageRefresh for TabContainer

  Jan 21, 2009 11:05 PM|LINK

   Hi

   I managed to get it to work with OnClientActiveTabChanged="clientActiveTabChanged", however I am getting a conflict with the jquery.blockUI.js.

  I am getting

   

  <div class="errorTitle">node is undefined</div><div class="objectBox objectBox-stackFrame">install()jquery.blockUI.js (line 133)</div><div class="objectBox objectBox-stackFrame">unblockUI()()jquery.blockUI.js (line 23)</div><div class="objectBox objectBox-stackFrame">beginRequest()GeneralJQuery.js (line 19)</div><div class="objectBox objectBox-stackFrame">(?)()()ScriptRe...fee561d5e (line 2399)</div><div class="objectBox objectBox-stackFrame">Sys$WebForms$PageRequestManager$_onFormSubmit(undefined)ScriptRe...fee561d5e (line 873)</div><div class="objectBox objectBox-stackFrame">Sys$WebForms$PageRequestManager$_doPostBack("ctl00$MainContent$UIListArticles1$btnMostPopularTrigger", "")ScriptRe...fee561d5e (line 484)</div><div class="objectBox objectBox-stackFrame">(?)()()ScriptRe...fee561d5e (line 47)</div><div class="objectBox objectBox-stackFrame">clientActiveTabChanged(Object, Object)UIListAr...x?catID=2 (line 224)</div><div class="objectBox objectBox-stackFrame">(?)()(Object, Object)ScriptRe...fee561d5e (line 2399)</div><div class="objectBox objectBox-stackFrame">raiseActiveTabChanged()()ScriptRe...t=a85956d (line 18)</div><div class="objectBox objectBox-stackFrame">set_activeTabIndex()(2)ScriptRe...t=a85956d (line 36)</div><div class="objectBox objectBox-stackFrame">set_activeTab()(Object)ScriptRe...t=a85956d (line 50)</div><div class="objectBox objectBox-stackFrame">_header_onclick()(Object type=click rawEvent=Event click altKey=false)ScriptRe...t=a85956d (line 265)</div><div class="objectBox objectBox-stackFrame">(?)()()</div>

   Any ideas?

   I need the jquery.blockUI.js library since I am using it somewhere else.

  Thanks
  

• • Reply
  

  monfu

  Member

  256 Points

  177 Posts

  Re: Avoiding pageRefresh for TabContainer

  Jan 21, 2009 11:13 PM|LINK

   Its working now, just removed the library and installed it again.

  The only problem now is that sometimes, the length of the gridview is extending more than the normal length and is getting out of the screen.

   

  Will have to see to that problem now!
  

  • Marked as answer by Zhi-Qiang Ni - MSFT on Jan 23, 2009 06:56 AM