代码之家 › 专栏 › 技术社区 › Dodinas

jQuery将数据加载到Accordion中

accordion ajax jquery

Dodinas · 技术社区 · 15 年前

我有一个后续问题,我希望得到一些建议。基本上,我正在将数据加载到以下div中: "#my_div" ,实际上是另一个div的子元素, "#accordion" ,这是一个手风琴(jqueryui)。

$("#accordion").accordion({collapsible: true, clearStyle: true });

function load_list() {
 $.getJSON('json/load.php', function(data) {
        $("#my_div").empty();
        $.each(data, function(k, v){                                 
        $("#my_div").append('
                                     <li> \
                                      <div> \
                                       <input type="checkbox"> \
                                      </div> \
                                      <div>'+v.due_date+'</div> \
                                      <h3> \
                                       <span>'+v.title+'</span> \
                                       </h3> \
                                      </li> \
                                              ');
                                    });
});
}

以及HTML:

 <div id="accordion">
     <div id="my_div">JSON elements loaded here.</div>
 </div>

我试过 $("#accordion").accordion({collapsible: true, clearStyle: true }); load_list() 功能,但仍得到相同的结果。这方面的任何帮助都会很好。

非常感谢!

更新:

以下是我最近尝试的代码:

 function load_tasks() {

            $.ajax({
                  url: 'json/load.php',
                  dataType: 'json', 
                  success: function(data) {
                      $.each(data, function(k, v){
                                $(("#my_div").append('
                                 <li> \
                                  <div> \
                                   <input type="checkbox"> \
                                  </div> \
                                  <div>'+v.due_date+'</div> \
                                  <h3> \
                                   <span>'+v.title+'</span> \
                                   </h3> \
                                  </li> \
                                          ');
                                });                                         
                     $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true });
                        }
 });
 }

我还尝试了autoHeight的其他建议(默认情况下为true,否?),以及“resize”方法。

不幸的是,这些似乎都不起作用。如果其他人有什么建议,我们将不胜感激。或者,这只是在这种特殊情况下无法实现的事情。

5 回复 | 直到 8 年前

Christian Smorra 15 年前

我从未使用过accordion,但在浏览了一眼api文档后,我发现这可能就是您想要的: http://docs.jquery.com/UI/Accordion#method-resize

$("#accordion").accordion({collapsible: true, clearStyle: true });

function load_list() {
 $.getJSON('json/load.php', function(data) {
        $("#my_div").empty();
        $.each(data, function(k, v){                                 
        $("#my_div").append('
                                     <li> \
                                      <div> \
                                       <input type="checkbox"> \
                                      </div> \
                                      <div>'+v.due_date+'</div> \
                                      <h3> \
                                       <span>'+v.title+'</span> \
                                       </h3> \
                                      </li> \
                                              ');
    $("#accordion").accordion( "resize" );  
    });
});
}

尝试此片段

Marko 15 年前

您可以将accordion init移动到getJSON函数的success回调,这将确保accordion在已加载元素的情况下运行。

干杯,

马尔科

Manie 15 年前

function load_tasks() {
        var data = ""; 
        $.ajax({
              url: 'json/load.php',
              dataType: 'json', 
              success: function(msg) {
                  data = msg;
              },
              complete: function() {
                    $.each(data, function(k, v){
                            $(("#my_div").append('
                             <li> \
                              <div> \
                               <input type="checkbox"> \
                              </div> \
                              <div>'+v.due_date+'</div> \
                              <h3> \
                               <span>'+v.title+'</span> \
                               </h3> \
                              </li> \
                                      ');
                            });                                         
                 $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true });               

        });

}

Dodinas 15 年前

好吧,我想我知道了。虽然,我不认为这是“正确”的方式来实现。

我注意到,当我完全删除“tab”函数时,它工作得很好(当删除tab时,上面几乎所有的片段都能完美地加载accordion)。

因此,我认为这与标签中的手风琴以及页面加载时元素的构造方式有关。

setTimeout('$("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true })', 1000);`

我仍然不确定是否有更好的方法来实现这一点,但是,尽管如此,等待1秒钟加载手风琴现在工作。

Peter H Pottinger 12 年前

            $('#accordion').accordion({
                collapsible: true,
                active: false,
                beforeActivate:function(event, ui) {
                    href = ui.newHeader.attr('id');
                    $.get(href, function(data) {
                        ui.newHeader.next("div").html(data);
                    });

                },
                heightStyle: "content"
            });