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一起工作

回答

相關問題