Добавить новый раздел в Jquery UI Accordion при нажатии на ссылку? (воспламенитель кода)

Я хотел бы добавить новый раздел в аккордеон пользовательского интерфейса Jquery, когда кто-то щелкает ссылку на той же странице или на другой странице. Я просмотрел функцию append(), но содержимое, которое я буду извлекать, будет содержать PHP, а также HTML, поэтому его нужно будет проанализировать.

Ссылка, по которой пользователь будет щелкать, будет ссылаться на запись базы данных, например, для извлечения. /site/index/record/3 (собираю в Code Igniter).

Как лучше всего это сделать?

Я думал об использовании prependTo (если это правильно), а затем извлекать контент через ajax? Не уверен, как это сработает, хотя переход с другой страницы.

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

Вот аккордеон js, который у меня есть:

$(function() { // jquery ui accordion with mods for sorting
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            change:
              function(event, ui){
                ui.newHeader.parent().prependTo(this); // move the active panel to the top of the accordion
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

        $(".new_accordian").click(function( event ) {
        $('#ccaccordion').prepend("<div><h3><a href=\"#\">Section X</a></h3><div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p></div></div>");
    });

});

Спасибо!


php ajax codeigniter jquery-ui jquery-ui-accordion
person Robimp    schedule 29.09.2010    source источник
comment
Извините, просто чтобы уточнить, так как я немного болтал, мой вопрос: «Как мне добавить новый раздел аккордеона при нажатии на ссылку?» Спасибо.   -  person Robimp    schedule 29.09.2010

Ответы (1)


arrow_upward
1
arrow_downward

Я добился этого, изменив HTML, добавив новый раздел Accordion, а затем вызвав что-то вроде следующего:

$("#days").accordion('destroy').accordion({
    autoHeight: false
    ,navigation: true
    ,collapsible: true
    ,active: false
});

Где <div id="days">...</div> — это контейнер, в котором хранятся все разделы аккордеона. По сути, вы должны уничтожить, а затем повторно инициализировать аккордеон при добавлении новых элементов.

Таким образом, вы получите свой новый раздел через AJAX, добавьте () HTML в контейнер аккордеона, а затем заново создадите аккордеон.

person methodin    schedule 29.09.2010
comment
Привет, Методин! Спасибо за ваш ответ, я обновил свой код выше для функции добавления, которая у меня работает. Теперь это добавляет html, отображаемый при нажатии ссылки на странице с классом new_accordian. Я понимаю, что вы говорите о том, что его нужно воссоздать, поскольку новый html просто добавлен, он не работает с остальной частью аккордеона. Извините за глупый вопрос, но как мне добавить ваш код выше? Спасибо! - person Robimp; 29.09.2010
comment
Итак, если у вас есть что-то вроде ‹div id=days›‹div class=accordion›‹h3›Accordion1‹/h3›‹/div›‹div class=accordion›‹h3›Accordion2‹/h3›‹/div›‹/ div› Затем происходит событие onclick где-то на странице, вы получаете HTML с помощью AJAX. При обратном вызове этой функции Ajax для вызова $(#container).append(responseText); - где responseText — ответ AJAX. После этого вы должны добавить код, который я изначально опубликовал. Очевидно, вы должны убедиться, что HTML-код, возвращаемый AJAX, точно соответствует блоку в аккордеоне. Если он содержит дополнительный HTML, он, вероятно, не будет работать. - person methodin; 29.09.2010