jQuery的数据加载到手风琴

最近，我问了一个问题（并有它回答）位置：jQuery Load JSON jQuery的数据加载到手风琴

我有一个跟进的问题，我希望能得到一些建议。基本上，我正在将数据加载到以下div："#my_div"，它实际上是另一个div的子元素，"#accordion"，这是一个手风琴（jQuery UI）。

我的代码如下所示：

$("#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>

然而，问题是：在页面加载，然后JSON元素，手风琴未自动调整大小以适应JSON加载的元素。只有当我折叠手风琴，然后重新打开时，才能正确看到这些元素。（这发生在FF和IE中）。

我试过把$("#accordion").accordion({collapsible: true, clearStyle: true });放在load_list()函数的末尾，但我仍然得到相同的结果。任何对此的帮助都会很大。

非常感谢！

UPDATE：

每下面的建议，我已经尝试了一些不同的方法，但我仍然在运行到同样的问题。

这里是最近的代码，我曾尝试：

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的其他建议（默认情况下是真实的，不是吗？），以及“调整大小”的方法。

这些都不似乎工作，很遗憾。如果任何人有任何建议，他们将不胜感激。或者，也许，这只是在这种特殊情况下无法完成的事情。

来源

2010-07-29 Dodinas

好的，我相信我明白了。虽然，我不认为这是实现“正确”的方式。

我之前没有提到这个手风琴实际上是在一个使用$ .tabs（）和jQuery的“tab”中。

我注意到，当我完全删除“标签”功能时，它可以正常工作（几乎所有的片段都会在标签被移除时完美地加载手风琴）。

因此，我相信这与手风琴在选项卡内部以及在页面加载时构造元素的方式有关。

一劈/解决方法，我添加以下代码，这对于现在的作品完美：

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

我还在，如果有更好的方式来实现这一目标不确定，但尽管如此，方法等待1秒现在加载手风琴作品。

感谢您的所有建议。

来源

2010-07-30 14:50:02 Dodinas

可以手风琴初始化移动到的getJSON功能的成功回调，这将确保与已加载的元素手风琴运行。你

也可以使用autoHeight以确保手风琴的尺寸适合所有元素。

干杯，

马尔科

来源

2010-07-29 19:37:43 Marko

感谢您的建议，但是，Marko看起来并不像回调工作。我不知道为什么。看到我上面的更新。 – Dodinas 2010-07-30 00:40:08

回调正在为我工作，但调整大小（）不起作用。我也尝试刷新（）没有成功。 – tintyethan 2013-11-14 20:24:36

我终于得到这个与$（“。选择器”）。手风琴（“刷新”） – tintyethan 2013-11-15 14:01:33

我从来没有与手风琴的工作，但在API文档一眼后，我figgured这可能是你正在寻找： 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"); 
    }); 
}); 
}

试试这个snippet

来源

2010-07-29 19:44: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 });    

     });

}

来源

2010-07-30 05:58:36 Manie

  $('#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" 
      });

来源

2013-06-27 17:59:10

jQuery的数据加载到手风琴

回答

相关问题