Аккордеонный редизайн JQueryUI

Я изменяю структуру аккордеона () и меняю ее на основе выбора с помощью AJAX.

Проблема в том, что, основываясь на документах аккордеона, я ожидаю, что он будет работать как

<h3>header</h3>
<div><anything></anything></div>

Создание h3 для заголовка и div для тела, но когда я использую ajax для его динамического создания, это облажается. Этот код специально использует правильный заголовок для первого окна аккордеона, но тело пусто, а следующий заголовок становится «Нет открытых окон сеанса ...», что явно не то, что я хотел. Полученный JSON находится здесь: http://benbuzbee.com/trs/json.php?show=sessions&courseid=5

$(function() { 
    $("#courseselect").change(function () {

        $("#testselect").accordion("destroy").html(""); // Empty any previous data
        $("#testselect").css("display", "block"); // Display it if it was hidden

        $.getJSON('json.php?show=sessions&courseid=' + $(this).val(), function(data) {
            for (x in data)
            {
                $("#testselect").append("<h3><a href=\"#\">" + data[x].name + "</a></h3>");
                $("#testselect").append("<div>");
                if (!data[x].sessions)
                    $("#testselect").append("<p>There are no open session windows for this test.</p>");
                for (si in data[x].sessions)
                {
                    $("#testselect").append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
                }
                $("#testselect").append("</div>");
            }
            $("#testselect").accordion();
            //$("#testselect").accordion({ change:function(event, ui) {  courseid = ui.newHeader.attr("value"); }
        }); // End getJSON 
     }); // end .change
}); // end $()

javascript jquery jquery-ui jquery-ui-accordion
person Ben    schedule 10.01.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, что вижу несколько проблем.

Ваше заявление

$("#testselect").append("<div>")

добавит ОБА открывающий и закрывающий тег к #testSelect следующим образом:

 <div id='testselect'><h3><a> </a> </h3><div></div> </div>

Любое дальнейшее добавление к #testselect будет добавлять элементы ПОСЛЕ тегов div.

Ваше следующее заявление,

$("#testselect").append("<p>There are no open session windows for this test.</p>");

Сделаю это

   <div id='testselect'><h3><a></a></h3><div></div><p> There are no open session windows for this test. </p> </div>

Ваше заявление

$("#select.").append("</div>")

НЕ будет добавлять закрывающий тег div к #testselect, как вы, кажется, намереваетесь. Вместо этого он ничего не сделает.

Вы должны изменить цикл for на что-то вроде этого:

for (x in data)
{
     var $header = $("<h3>").appendTo("#testSelect");
     $header.append("<a href=\"#\">" + data[x].name + "</a>")
     var messageContainer = $("<div>").appendTo($header);
     if (!data[x].sessions)
           messageContainer.append("<p> There are no open session windows for this test </p>");
           for (si in data[x].sessions)
           {
                  messageContainer.append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
           }
           $("#testselect").accordion();
}
person Adam Prax    schedule 10.01.2011
comment
Обратите внимание, что это должно быть var messageContainer= $(‹div›).appendTo(#testselect) не в заголовке, а в остальном, очень полезно, спасибо! - person Ben; 11.01.2011