2

一般来说，我是 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()？

4

3 回答 3

4

我为另一个项目打了同样的电话。由于其他原因，您可能希望将您的 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(); 
      } 
    });
})(); 
} 
});

希望有帮助！

于 2009-04-22T05:07:47.543 回答
0

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

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

$.ajax({
 type: 'POST',
 async: false,
 ........
于 2011-02-09T14:34:15.730 回答
0

您需要获取 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

此外，使用萤火虫，粘贴一个 console.log(list); 最后，确保您生成的是您认为的 HTML。如果你真的卡在 IE6 中，alert(list) 有点像穷人的等价物（只要你的文件不是太大）。

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

于 2009-04-21T03:55:39.707 回答