ошибка с панелью обновления и аккордеоном

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 () и pageLoad () не совпадают!

 <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

Я знаю, что это старый пост, но он все еще не решен.

Итак, у вас есть две проблемы:

first , как указывает @rickschott, вам нужно инициализировать плагин после каждой частичной обратной передачи (не только в первый раз), потому что плагин находится внутри 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 }

Важно : не рекомендуется изменять сторонние плагины, потому что каждый раз, когда вы обновляете свой плагин, вы можете потерять свои изменения. Но кажется, что ddaccordion больше не поддерживается его авторами, так что, возможно, это может быть хорошим решением, поэтому я надеюсь, что это поможет кому-то еще.

Answer 4

Поскольку весь контент / определение вашего аккордеона находится внутри панели обновлений, вам придется перезапускать его каждый раз, когда обновляется панель обновлений, потому что вы обязательно получаете «свежую» копию аккордеона и все связанные событияк этому нет.

У нас тоже была эта проблема (с элементами управления difnet), и наше решение состоит в том, чтобы поместить минимальный необходимый нам уровень внутри панели обновления, как скрытые кнопки, и затем кодировать аккордеон для«нажмите» эти кнопки, чтобы панель обновлений работала без потери аккордеона.