JQuery Treeview не работает с Ajax

Я новичок в JQuery и веб-разработке в целом. Я пытаюсь загрузить данные из файла XML и создать неупорядоченный список. У меня эта часть работает, теперь я пытаюсь использовать плагин TreeView, поэтому я может свернуть / развернуть данные. Данные загружаются так:

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "solutions.xml",
        dataType: ($.browser.msie) ? "text" : "xml",
        success: function(data) {
            var xml;
            if (typeof data == "string") {
                // Work around IE6 lameness
                xml = new ActiveXObject("Microsoft.XMLDOM");
                xml.async = false;
                xml.loadXML(data);
            } else {
                xml = data;
            }

            list = ""
            $(xml).find("Group").each(function() {
                group = $(this).attr("name");
                list += "<li><span>" + group + "</span><ul>";

                $(this).find("Solution").each(function() {
                    solution = $(this).attr("name");
                    list += "<li><span>" + solution + "</span></li>";
               });

               list += "</ul></li>";
            });

            $("#groups").html(list);           
        },

        error: function(x) {
            alert("Error processing solutions.xml.");
        }
    });

    $("#groups").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });
});

и HTML выглядит так:

<html>
  ...
  <body>
    <ul id="groups">
    </ul>
  </body>
</html>

Неупорядоченный список отображается правильно, но маленькие знаки [+] и [-] не отображаются, а разделы нельзя сворачивать / расширять. Если я избавлюсь от загрузки Ajax и вставлю неупорядоченный список в #groups вручную, он будет работать должным образом.

Что я делаю неправильно? Есть ли другие плагины или библиотеки Javascript, которые могли бы упростить эту задачу? Решение должно работать в IE6 локально (то есть на веб-сервере).

Обновление: я нашел обходной путь: если я определю свое древовидное представление следующим образом, он будет работать:

function makeTreeview() {
    $("#container").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });
}
setTimeout('makeTreeview();', 50);

Я думаю, что проблема в том, что когда я создаю древовидное представление, материал ajax еще не работал, поэтому, когда вызывается treeview (), неупорядоченный список еще не создан. Я еще не тестировал это с IE6. Есть ли лучший способ сделать это без использования SetTimeout ()?


javascript jquery jquery-plugins
person Mark A. Nicolosi    schedule 20.04.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

в примере, который вы показываете - ваше древовидное представление все равно не сработает, если вызов ajax занимает более 50 мс - что может легко произойти во время начальной загрузки, если с одного и того же сервера загружается более двух объектов.

В этом примере используется JSON и одновременно загружаются HTML-данные из метода страницы в серию div.

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
(function (){
     var divname ="#queuediv"+i; 

    $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      url: "test12.aspx/GetHtmlTest", 
      data: "{}", 
      error: function(xhr, status, error) { 
          alert("AJAX Error!"); 
      }, 
       success: function(msg) { 
        $(divname).removeClass('isequeue_updating'); 
        $(divname).html(msg); 
        $("#somethingfromthemsg").treeview(); 
      } 
    });
})(); 
} 
});

Надеюсь, это поможет!

person Jim    schedule 22.04.2009
comment
Спасибо, Джим, это похоже на то, что я ищу. Примерно 50 мс, мне пришлось увеличить это, когда я тестировал в IE6, из-за его медленного характера. Я проверю это завтра и отмечу ваш ответ как правильный, если он сработает. - person Mark A. Nicolosi; 23.04.2009

arrow_upward
0
arrow_downward

Вам нужно получить FireBug (надстройку Firefox), а затем вы сможете увидеть в консоли, что возвращается, и убедиться, что это соответствует тому, что вы ожидаете (и что он действительно выполняет запрос ...).

Как только вы заставите его работать в FF, вы сможете поддерживать старый браузер IE6 10-летней давности.

Вы также можете подумать о некоторых других вещах:

Весь ActiveXObject ("Microsoft.XMLDOM") выскакивает, как я, за ненадобностью. Если вы передадите XML в строке в $ (), jQuery превратит его в объект DOM.

Кроме того, .Find можно заменить на:

$('Element', this);

Так например:

var xmlDoc = '<Group><Solution name="foo" /><Solution name="bar" /></Group>';
$('Solution', xmlDoc).each(function() { 
  document.write( $(this).attr('name') );
});

выплюнул бы:

foo
bar

Также с помощью firebug прикрепите console.log (list); в конце, чтобы убедиться, что вы генерируете тот HTML, которым вы себя считаете. Если вы действительно застряли в IE6, alert (list) в некоторой степени работает как эквивалент для бедных (если ваш файл не слишком велик).

Короче говоря, я думаю, что вы на правильном пути, вам просто нужны инструменты для правильной отладки.

person gregmac    schedule 21.04.2009
comment
Спасибо за предложения. Материал XML на самом деле работает нормально, я просто не могу заставить плагин Treeview работать в сочетании с ним. - person Mark A. Nicolosi; 21.04.2009

arrow_upward
0
arrow_downward

Для всех, кто тоже нашел этот пост. У меня была проблема с вызовом ajax.

Если вы хотите дождаться возврата вызова ajax, вам нужно установить async как false.

$.ajax({
 type: 'POST',
 async: false,
 ........
person Shannow    schedule 09.02.2011