如何通过 AJAX 在 JQuery Accordion 中加载内容 [英] How do I load content in JQuery Accordion via AJAX

问题描述

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

解决方案

我正在使用 jquery ui-1.11.4 并且遇到了同样的问题.这是我拼凑的解决方案.

Javascript:

<代码>var already_loaded = new Object();//用于跟踪哪些手风琴已经加载$(函数(){$( "#accordion" ).accordion({可折叠:真实，活动:假，//heightStyle: 'fill',//http://jqueryui.com/accordion/#fillspace -- 只需将手风琴的高度设置为其父容器的高度即可.我们需要一种方法来将父项的高度更改为新添加内容的高度.激活:功能(e，ui){//仅在手风琴打开时触发..如果(ui.newHeader.length>0){//只检索远程内容一次..if(! already_loaded[ui.newHeader[0].id]==1){var srcObj = $(ui.newHeader[0]).children('a');var url = srcObj.attr('href');var folder = srcObj.attr('数据文件夹');//$.get(url, function (data){//如果您想使用 GET 方法，请取消注释并注释下一行.确保将任何需要的查询字符串参数添加到 URL.$.post(url, {doCmd:'getFolderFiles', folder:srcObj.attr('data-folder')}, 函数(数据){$(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 -- 文档对此不清楚，但这只会刷新添加/删除的面板.不使用新添加的内容刷新现有面板.already_loaded[ui.newHeader[0].id]=1;//跟踪加载的手风琴});}}}});});

HTML:

<代码><div id="手风琴"><h3><a href="program_to_generate_accordion_content.php" data-folder="2015">2015 文件</a></h3>
加载请稍候.
<h3><a href="program_to_generate_accordion_content.php" data-folder="2016">2016 文件</a></h3>
加载请稍候.

I have a jquery accordion that loads a lot of data. This accordion is generated by querying a database. My question - is there a way to not load the content until a specific element of the accordion has been clicked? Basically, I'd like to replicate the functionality of the jquery tab ajax content load to the accordion.

解决方案

I am using jquery ui-1.11.4 and had this same issue. This is the solution I pieced together.

The Javascript:

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
                    });
                }
            }
        }

    });

});

The HTML:

<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>

这篇关于如何通过 AJAX 在 JQuery Accordion 中加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！