none
Problème avec JQueryUI Tabs et les Timer dans un Update Panel RRS feed

  • Question

  • Bonjour, 

     

    J'ai un soucis avec le composant Tabs de JQuery UI, au chargement je vois bien les onglets, et au premier click du timer j'ai l'impression que le javascript n'est plus chargé ce qui ne me donne pas un affichage correct. 

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="testonglets.aspx.cs" Inherits="Default2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>Chat Test Page</title>
    <link href="css/cupertino/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/sheet.css"/>
    </head>
    <body>
    
    <form id="Form1" runat="server">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
    
    <script type="text/javascript" language="javascript">
      $(document).ready(function () {
        $("#tabs").tabs();
      });
    </script>
    <asp:ScriptManager ID="ScriptManager" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" Interval="3000" Enabled="true" />
            <div id="tabs">
              <ul>
                <li><a href="#tab-Owners">Owners</a></li>
                <li><a href="#tab-Status">Status</a></li>
                <li><a href="#tab-Roles">Roles</a></li>
              </ul>
              <div id="tab-Owners">
              <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel1" UpdateMode="Conditional">
              <ContentTemplate>
              ...
              </ContentTemplate>
              </asp:UpdatePanel>
              </div>
              <div id="tab-Status">
              <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel2" UpdateMode="Conditional">
              <ContentTemplate>
              ...
              </ContentTemplate>
              </asp:UpdatePanel>
              </div>
              <div id="tab-Roles">
              <asp:UpdatePanel runat="server" ID="TableMaintRolesUpdatePanel3" UpdateMode="Conditional">
              <ContentTemplate>
              ...
              </ContentTemplate>
              </asp:UpdatePanel>
              </div>
          </div>  
          </ContentTemplate>
        </asp:UpdatePanel>
    
      </form>
    </body>
    </html>
    
    

    mercredi 16 mars 2011 19:33

Réponses

  • J'ai pu résoudre le problème tout seul finalement en changeant l'attribut UpdateMode en "Conditional" et ChildrenAsTriggers en "false"

    Pour chacun des sous update panel j'ai implémenté des Triggers déclenchés par le Timer également.

     

    <script type="text/javascript" language="javascript">
      $(document).ready(function () {
        $("#tabs").tabs();
      });
    </script>
    
    <asp:ScriptManager ID="ScriptManager" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False" >
        <ContentTemplate>
    
    
        <asp:Timer ID="Timer1" runat="server" Interval="3000" Enabled="true"/>
    
            <div id="tabs">
              <ul>
                <li><a href="#tab-Owners">Owners</a></li>
                <li><a href="#tab-Status">Status</a></li>
                <li><a href="#tab-Roles">Roles</a></li>
              </ul>
              
              <div id="tab-Owners">
    
                <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel1" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Owner
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
    
     
              <div id="tab-Status">
                <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel2" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Status
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
    
              <div id="tab-Roles">
                <asp:UpdatePanel runat="server" ID="TableMaintRolesUpdatePanel3" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Roles
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
          </div>  
          </ContentTemplate>
        </asp:UpdatePanel>
    
     

    • Marqué comme réponse Yohan D jeudi 17 mars 2011 07:02
    jeudi 17 mars 2011 07:01

Toutes les réponses

  • J'ai pu résoudre le problème tout seul finalement en changeant l'attribut UpdateMode en "Conditional" et ChildrenAsTriggers en "false"

    Pour chacun des sous update panel j'ai implémenté des Triggers déclenchés par le Timer également.

     

    <script type="text/javascript" language="javascript">
      $(document).ready(function () {
        $("#tabs").tabs();
      });
    </script>
    
    <asp:ScriptManager ID="ScriptManager" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False" >
        <ContentTemplate>
    
    
        <asp:Timer ID="Timer1" runat="server" Interval="3000" Enabled="true"/>
    
            <div id="tabs">
              <ul>
                <li><a href="#tab-Owners">Owners</a></li>
                <li><a href="#tab-Status">Status</a></li>
                <li><a href="#tab-Roles">Roles</a></li>
              </ul>
              
              <div id="tab-Owners">
    
                <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel1" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Owner
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
    
     
              <div id="tab-Status">
                <asp:UpdatePanel runat="server" ID="TableMaintStatusUpdatePanel2" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Status
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
    
              <div id="tab-Roles">
                <asp:UpdatePanel runat="server" ID="TableMaintRolesUpdatePanel3" UpdateMode="Conditional">
                  <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                  </Triggers>
                  <ContentTemplate>
                  Roles
                  </ContentTemplate>
                </asp:UpdatePanel>
              </div>
          </div>  
          </ContentTemplate>
        </asp:UpdatePanel>
    
     

    • Marqué comme réponse Yohan D jeudi 17 mars 2011 07:02
    jeudi 17 mars 2011 07:01
  • Une autre solution consiste à rajouter la ligne suivante au PageLoad()
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "JQTabs", "$(\"#tabs\").tabs();", true);
    
    Ainsi le javascript est ré-appliqué à chaque postback
    jeudi 17 mars 2011 14:08