JQuery Treeview不能与Ajax一起工作

我是新来的JQuery和一般的web开发。我试图从XML文件加载一些数据并构建一个无序列表。我有这部分工作，现在我试图使用TreeView插件，所以我可以折叠/展开数据。该数据被加载这样的：JQuery Treeview不能与Ajax一起工作

$(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（即web服务器）。

更新：我发现了一个解决方法：如果我这样定义我的树视图东西，它的工作原理：

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

我认为这个问题是，当我创建树视图，阿贾克斯的东西不是招”完成它的工作，所以当treeview（）被调用时，无序列表还没有被创建。我还没有用IE6测试过。有没有更好的方法来做到这一点，而不使用SetTimeout（）？

来源

2009-04-20 Mark A. Nicolosi

我对另一个项目进行了相同类型的调用。由于其他原因，你可能会想要在匿名函数中包装你的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(); 
     } 
    }); 
})(); 
} 
});

希望帮助！

来源

2009-04-22 05:07:47 Jim

谢谢吉姆，这看起来我在找什么。大约50ms时，我在IE6测试时不得不增加这个速度，因为它速度很慢。我会明天测试这个，如果它有效，请将你的答案标记为正确。 – 2009-04-23 02:48:53

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

一旦你在FF中工作，你可以支持古老的10年历史的IE6浏览器。

还有，你可能要考虑一些其他的东西：

整个的ActiveXObject（“Microsoft.XMLDOM”）跳出来和我一样是不必要的。如果你将一个字符串中的XML传递给$（），jQuery将它变成一个DOM对象。

$('Element', this);

因此，例如：

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

就吐了出来：

foo 
bar

而且，与萤火虫，坚持一个控制台

此外，.Find可以被替换.LOG（列表）;最后，确保你正在生成你认为是你的HTML。如果你真的被困在IE6中，alert（list）有点像一个穷人的等价物（只要你的文件不是太大）。

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

来源

2009-04-21 03:55:39 gregmac

感谢您的建议。 XML的东西实际上工作正常，我只是无法让Treeview插件与它结合使用。 – 2009-04-21 14:24:25

对于任何人也可以找到自己的方式来这篇文章。我用ajax调用了这个麻烦。

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

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

来源

2011-02-09 14:34:15 Shannow

JQuery Treeview不能与Ajax一起工作

回答

相关问题