JQuery Загрузка данных в аккордеон - PullRequest
Новая
       6

JQuery Загрузка данных в аккордеон

0 голосов
/ 29 июля 2010

Я недавно задал вопрос (и получил ли он ответ) здесь: jQuery Load JSON

У меня есть дополнительный вопрос, я надеялся получить какой-нибудь совет. По сути, я загружаю данные в следующий div: "#my_div", который на самом деле является дочерним элементом другого div, "#accordion", который является аккордеоном (пользовательский интерфейс jQuery).

Мой код выглядит так: 

$("#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 (что по умолчанию верно, нет?), А также метод 'resize'.

К сожалению, ни один из них не работает. Если у кого-то есть какие-либо предложения, они будут очень благодарны. Или, может быть, это просто то, чего нельзя достичь в данной конкретной ситуации.

Ответы [ 5 ]

1 голос
/ 29 июля 2010

я никогда не работал с аккордеоном, но после взгляда на api docs я понял, что это может быть то, что вы ищете: 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" );  
    });
});
}

попробуйте этот фрагмент

0 голосов
/ 27 июня 2013 
            $('#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"
            });
0 голосов
/ 30 июля 2010

Ладно, думаю, я понял это. Хотя я не думаю, что это «правильный» способ достижения цели.

Я не упомянул ранее, что этот аккордеон на самом деле находится во «вкладке», используя $ .tabs () с jQuery.

Я заметил, что когда я полностью удаляю функцию "tab", она работает нормально (почти все фрагменты выше прекрасно загружают аккордеон при удалении вкладок).

В результате я считаю, что это как-то связано с аккордеоном, находящимся внутри вкладок, и тем, как элементы создаются при загрузке страницы.

В качестве хака / обходного пути я добавил следующий код, который сейчас отлично работает: 

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

Я до сих пор не уверен, есть ли лучший способ добиться этого, но, тем не менее, пока стоит 1 секунда, чтобы загрузить аккордеон.

Спасибо за все предложения.

0 голосов
/ 30 июля 2010

попробуйте это .. 

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

        });

}

0 голосов
/ 29 июля 2010

Вы можете переместить init-аккордеон к успешному обратному вызову функции getJSON, который обеспечит запуск аккордеона с уже загруженными элементами.

Также вы можете использовать autoHeight, чтобы убедиться, что размер аккордеона соответствует всем элементам.

Приветствия

Marko

...