JQuery Accordion и загрузка контента через AJAX

Question

Я хотел бы загрузить содержимое под каждым заголовком jQuery accordion , используя команду jQuery load . В настоящее время я настроил это следующим образом

$(function() {

    $("#accordion").accordion({          
        header: "h2",
        active: false              
    });

    $("h2", "#accordion").click(function(e) {
        var contentDiv = $(this).next("div");
        contentDiv.load($(this).find("a").attr("href"));      
    });                    
});

и HTML ( соответствующий фрагмент )

<div id="accordion">
    <div>
        <h2><a href="home.htm">Home</a></h2>
        <div>
           <!-- placeholder for content -->
        </div>
    </div>
    <div>
        <h2><a href="products.htm">Products</a></h2>
        <div>
           <!-- placeholder for content -->       
        </div>
    </div>
</div>

Теперь все это работает нормально, но есть проблема в том, что загрузка контента таким способом прерывает анимацию скольжения вниз аккордеонного плагина в некоторых браузерах (IE6), а в других (FF) анимация скольжения вниз не происходят.

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

Любые идеи с благодарностью!

Answer 1

Я полагаю, что это самый простой ответ, который еще не дан, и соответствует всем требованиям OP ... загружается ДО показа div и динамически в соответствии с href тега a:

$("#accordion").accordion({

    active: false,
    clearStyle: true,
    changestart: function(event, ui){

        var href = $(ui.newHeader.find("a")).attr("href");

        $.post(href, function(data) {

            ui.newHeader.next("div").html(data);
        });

    }
});

Answer 2

Я имел дело с этой проблемой, используя jquery 1.4, и вот как я ее решил. Объект "ui" имеет два важных свойства "newContent" и "newHeader". Я использовал newContent и поместил идентификатор в div, который будет содержать содержимое. У меня также есть скрытый тег ввода для хранения важных данных, он просто стал чище.

 $("#accordion").accordion({
         disabled: false,
         autoHeight: false,
         collapsible: true,
         active: false,
         header: 'h2',
         animated: 'bounceslide',
         changestart: function (event, ui) {
             var location = ui.newContent.find('input:hidden[name=location]').val();
             ui.newContent.find('#data').load(location);


         }

     });

Answer 3

Я искал ответ на тот же вопрос и попробовал пару примеров здесь. Однако я получил неопределенное значение, используя пример с ui-state-active:

var clicked = $(this).find('.ui-state-active').attr('id');

Я также хотел убедиться, что функция .load вызывается только при первом раскрытии каждой панели аккордеона. Объединив пару ответов постеров, я получил желаемый результат:

$('#accordion').accordion({ 
    changestart: function(event, ui){
         if(ui.newContent.html() == ""){
             var id = ui.newContent.attr("id");
             ui.newContent.load("[your url]" + id);
         }
});

Answer 4

$( "#accordion" ).bind( "accordionchange", function(event, ui) {   
    if (ui.newHeader.text()=="LaLaLa"){
       do here ....
    }
   });