JQuery Accordion не «аккордеонизирует» новые панели, загруженные через AJAX - PullRequest
Новая
       0

JQuery Accordion не «аккордеонизирует» новые панели, загруженные через AJAX

1 голос
/ 20 мая 2011

Мне нужно загрузить аккордеонные панели на одну из моих страниц, используя AJAX, и я обнаружил, что JQuery «аккордеонизирует» все панели, определенные в файле HTML, но ни одну из панелей, загруженных с помощью Javascript.Еще одна небольшая странность: я делаю это на вложенной аккордеоне - аккордеоне внутри аккордеона.Это начало аккордеона, если хотите.

Я проверил другие вопросы о переполнении стека и форуме JQuery и обнаружил, что большинство из них касаются изменения размеров панелей после загрузки данных.Самый близкий вопрос, который я обнаружил, был здесь , но он не отвечает на мой вопрос, потому что попытка уничтожить и затем повторно согласовать мои загруженные JS панели не работает.

Это соответствующий раздел моего раздела заголовка html: 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css" type="text/css" />  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>  

<script type="text/javascript">  
  $(document).ready(function() {
    $(".accordion").accordion({
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false 
    });
  });  
</script>

Это соответствующий раздел раздела моего заголовка html: 

<div class="accordion">
    <h3 id="acc1">First panel title</h3>
    <div>First panel content</div>

    <h3 id="acc2">Second panel title</h3>
    <div class="accordion" id="ajaxresults-aliaslist">This is where the nested accordion goes</div>

    <h3 id="acc3">Third panel title</h3>
    <div>Thirdpanel content</div>
</div>

<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/");
</script>

Когда javascript загружает "/ loadaliaslist /", он получил сообщение со следующим содержанием: 

<h3>1st panel within a panel title</h3>
<div>1st panel within a panel content</div>

<h3>2nd panel within a panel title</h3>
<div>2nd panel within a panel content</div>

<h3>3rd panel within a panel title</h3>
<div>3rd panel within a panel content</div>

Я знаю, что содержимое выше передаетсяв div, потому что содержимое появляется несогласованным, когда я загружаю страницу.Вместо аккордеона в аккордеоне, я просто получаю скучный контент, сидящий на первом уровне последовательности снов.Я должен спуститься на уровень ... Подожди, где я был?

Правильно, еще одна вещь: я попробовал две вещи, которые не работали:
- Я попытался поместить скрипты загрузки и аккордеона внизу страницы (загрузкаво-первых), надеясь, что порядок будет иметь значение.(noobish? не уверен ...)
- Я попытался добавить скрипт в конце, чтобы уничтожить и воссоздать панели следующим образом: 

$("#ajaxresults-aliaslist").accordion('destroy').accordion();

Вот и все.Я действительно надеюсь, что кто-то есть Леонардо Ди Каприо из аккордеонов, и может помочь спасти меня от моего затруднительного положения.Очень ценится!

Ответы [ 3 ]

0 голосов
/ 21 мая 2011

РЕДАКТИРОВАТЬ ИЗ OP: НАЙДЕНО РЕШЕНИЕ

Поработав еще, я нашел способ решить эту проблему, если AJAX загружает новые данные сразу при загрузке страницы. Решением было вызвать функцию аккордеона, только один раз, сразу после загрузки. Как в решении ниже: 

<script type="text/javascript">  
$("#ajaxresults-aliaslist").load("/loadaliaslist/",  
    function(response, status, xhr) {    
    if (status == "error") {   
        var msg = "Sorry but there was an <strong>error</strong>: ";   
        $("#error").html(msg + xhr.status + " " + xhr.statusText);   
    }  
/* All panels are accordionized immediately after loading the content */   
    $(".accordion").accordion({   
        collapsible: true,  
        icons: false,  
        autoHeight: false,  
        active: false  
     });   
});   
</script>

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

0 голосов
/ 30 августа 2011

Полагаю, вы хотите сбросить управление аккордеоном.Попробуйте сделать это: 

$('#accordion')[0].innerHTML = "";

После этого заполните элемент управления HTML-кодом, используя приложение.

0 голосов
/ 20 мая 2011

Не проверено, но попробуйте что-то вроде этого ...

Проблема, скорее всего, связана с тем, что обработчики событий не присоединяются к вставленному контенту (через Ajax). 

$(function() {
    var config = {
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false
    }
    $(".accordion").live('load', function(){
        $(this).accordion(config);
    }).accordion(config);
});

РЕДАКТИРОВАТЬ: немного изменил код (все еще не проверено).

...