JQuery Treeview 不适用于 Ajax答案

【问题标题】：JQuery Treeview not working with AjaxJQuery Treeview 不适用于 Ajax
【发布时间】：2009-04-20 23:04:44
【问题描述】：

总的来说，我是 JQuery 和 Web 开发的新手。我正在尝试从 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

【解决方案1】：

我对另一个项目进行了相同类型的调用。由于其他原因，您可能希望将您的 ajax 调用包装在一个匿名函数中以创建一个闭包，以便您的变量保持您期望它们的样子...

success 方法是在您的调用完成后发生的回调函数，只需在该方法内创建您的树视图，或者如果您需要清楚起见将其分解为单独的函数。

在您展示的示例中 - 如果 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(); 
      } 
    });
})(); 
} 
});

希望有帮助！

【讨论】：

谢谢吉姆，这看起来就是我要找的。大约 50 毫秒，当我在 IE6 中测试时，我确实不得不增加它，因为它很慢。我明天会对此进行测试，并将您的答案标记为正确，如果它有效。

【解决方案2】：

您需要获取 FireBug（Firefox 插件），然后您可以在控制台中查看返回的内容，并确保它符合您的预期（并且它实际上正在执行请求..）。

一旦在 FF 中运行，就可以支持 10 年前的古老 IE6 浏览器了。

您可能还需要考虑其他一些事项：

整个 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) 有点像穷人的等价物（只要你的文件不是太大）。

简而言之，我认为您走在正确的轨道上，您只需要正确调试的工具。

【讨论】：

感谢您的建议。 XML 的东西实际上工作得很好，我只是无法让 Treeview 插件与它结合使用。

【解决方案3】：

对于那些也能找到这篇文章的人。我在使用 ajax 调用时遇到了这个问题。

如果要等待ajax调用返回，需要将async设置为false。

$.ajax({
 type: 'POST',
 async: false,
 ........

【讨论】：