JQuery Treeview не работает с Ajax - PullRequest
2 голосов
/ 21 апреля 2009

Я новичок в 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 ()?

Ответы [ 3 ]

4 голосов
/ 22 апреля 2009

Я сделал такой же вызов для другого проекта. По другим причинам вы, вероятно, захотите обернуть ваш 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(); 
      } 
    });
})(); 
} 
});

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

0 голосов
/ 09 февраля 2011

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

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

$.ajax({
 type: 'POST',
 async: false,
 ........
0 голосов
/ 21 апреля 2009

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

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


Есть также некоторые другие вещи, которые вы можете рассмотреть:

Весь ActiveXObject («Microsoft.XMLDOM») выскакивает из-за меня как ненужного. Если вы передаете XML в строке в $ (), jQuery превращает его в объект DOM.

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

$('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 (список); в конце, чтобы быть уверенным, что вы генерируете тот HTML, который вам нужен. Если вы действительно застряли в IE6, alert (list) в некоторой степени работает как эквивалент бедняков (если ваш файл не слишком большой).


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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...