代码之家  ›  专栏  ›  技术社区  ›  Andy Ali

如何通过AJAX在JQuery Accordion中加载内容

  •  3
  • Andy Ali  · 技术社区  · 15 年前

    我有一个jquery手风琴,可以加载大量数据。此手风琴是通过查询数据库生成的。我的问题-有没有办法在点击手风琴的特定元素之前不加载内容?基本上,我想将jquery选项卡ajax内容加载的功能复制到accordion。

    4 回复  |  直到 15 年前
        1
  •  3
  •   Drew    8 年前

    我使用的是jQueryUI-1.11.4,也有同样的问题。这就是我拼凑的解决方案。

    
    
    var already_loaded = new Object();  // used to track which accordions have already been loaded
    
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            active: false,
            //heightStyle: 'fill', // http://jqueryui.com/accordion/#fillspace  -- Just sets the height of the accordion to the height of it's parent container.  We need a way to change the height of the parent to that of the newly added content.
            activate: function (e, ui) {
                // only fire when the accordion is opening..
                if(ui.newHeader.length>0){                
                    // only retrieve the remote content once..
                    if(! already_loaded[ui.newHeader[0].id]==1){
                        var srcObj = $(ui.newHeader[0]).children('a');
                        var url = srcObj.attr('href');
                        var folder = srcObj.attr('data-folder');
                        //$.get(url, function (data){  // if you wanted to use the GET method uncomment this and comment the next line.  Be sure to add any needed query string parameters to the URL.
                        $.post(url, {doCmd:'getFolderFiles', folder:srcObj.attr('data-folder')}, function (data){
                            $(ui.newHeader[0]).next().html(data);
                            var contentDiv = $(ui.newHeader[0]).next()[0];
                            $('#'+contentDiv.id).height(contentDiv.scrollHeight);
                            //$("#accordion").accordion("refresh"); // http://api.jqueryui.com/accordion/#method-refresh -- The documentation isn't clear on this but this only refreshes added/removed panels.  Does not refresh existing panels with newly added content.
                            already_loaded[ui.newHeader[0].id]=1; // keep track of the loaded accordions
                        });
                    }
                }
            }
    
        });
    
    });
    
    

    
    <div id="accordion">
          <h3><a href="program_to_generate_accordion_content.php" data-folder="2015">2015 Files</a></h3>
          <div>
              <p>
                  Loading... Please wait.
              </p>
    
          </div>
    
          <h3><a href="program_to_generate_accordion_content.php" data-folder="2016">2016 Files</a></h3>
          <div>
              <p>
                  Loading... Please wait.
              </p>
          </div>
    </div>
    
        2
  •  -1
  •   Pointy    15 年前

    您不能将处理程序绑定到“更改”事件吗?