更新面板和手风琴错误

Question

我在页面上有一个accordion control(using jQuery)。当我将页面内容插入updatepanel 时，手风琴停止工作。如果我删除updatepanel，它就会开始工作。

为什么？
我该如何解决这个错误？
我是否必须重新实例化手风琴脚本/插件，如果是，那么如何？

  <script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
   ddaccordion.init({
        headerclass: "silverheader", //Shared CSS class name of headers group
        contentclass: "submenu", //Shared CSS class name of contents group
        revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
        mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
        defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
        onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
        oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
            //do nothing
        },
        onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
            //do nothing
        }
    })
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <div class="applemenu">
        <div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
        <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
       <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
       <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
       <div class="submenu">
           Some random content here<br />
          <img src="http://i27.tinypic.com/sy7295.gif" />
       </div>
       <div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
       <div class="submenu">
           Some random content here<br />
       </div>       
     </div>    
   </ContentTemplate>
</asp:UpdatePanel>

Answer 1

使用pageLoad，它会在所有部分回发时被调用：

$(document).ready() and pageLoad() are not the same!

 <script type="text/javascript">
    function pageLoad()
    {
       ddaccordion.init({
            headerclass: "silverheader", //Shared CSS class name of headers group
            contentclass: "submenu", //Shared CSS class name of contents group
            revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
            mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
            onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
            oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
                //do nothing
            },
            onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
                //do nothing
            }
        })
    }
    </script>

Answer 2

如果所有内容都在更新面板中，而不仅仅是将您的脚本放在更新面板中，它将开始工作。

Answer 3

由于您的手风琴的全部内容/定义都在您的更新面板中，因此您必须在每次更新面板更新时重新初始化它，因为您基本上会获得手风琴的“新”副本以及任何相关的事件它已经消失了。

我们也遇到过这个问题（使用不同的控件），我们的解决方案是将我们必须在更新面板中的最低限度，比如隐藏按钮，然后将手风琴编码为“推送”这些按钮，以便更新面板在不给手风琴下水的情况下做它的事情。

Answer 4

我知道这是一个旧帖子，但仍未解决。

所以，这里有两个问题：

首先，正如@rickschott 指出的那样，您需要在每次部分回发后（不仅是第一次）初始化插件，因为插件位于 UpdatePanel 内，因此它将停止工作UpdatePanel 更新后。

当您解决该问题时，您会遇到 第二个 问题：页面似乎一直在刷新，并且永远不会加载。这个问题可以被认为是 ddaccordion jquery 插件的错误。似乎它不是为重置而设计的（或在不从头开始加载页面的情况下销毁和重新创建）。我做了一个解决方法，但您可能需要对其进行测试：

• 打开ddaccordion.js，在里面找到init:function(config)。
• 删除这四行：

document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
document.write('<\/style>')

• 现在它将按预期工作。请记住将这 2 个 css 类添加到您的 css 文件中：

.submenu { display:none }
a.hiddenajaxlink { display:none }

重要提示：不建议修改 3rd 方插件，因为每次更新插件时，您可能会丢失所做的更改。但似乎 ddaccordion 不再由其作者维护，所以也许这可能是一个很好的解决方案，所以我希望它可以帮助其他人。