Question

我是一个新手，所以我缺乏知识。使用JQuery我试图在树中显示两个xml文件的数组。代码非常简单，这是我的html页面：

window.onload = openXML('xml_files/categories.xml','xml_files/products.xml');

var categories = new Array();
var products = new Array();

function jquery_treeview()
{
var unorderedList= ""; 

console.log(categories.length);

for (i=0; i < categories.length; i++)
    {
        unorderedList += "<li ><span onclick='showCategoryDetails("+i+")'>" + categories[i][1] + "</span><ul><ol type='a'>";
        for (j=0; j < products.length; j++)
        {
            if (categories[i][0] == products[j][2]){
            unorderedList += "<li ><span onclick='showProductDetails("+j+")'>" + products[j][1] +"</span></li>";}
        }
        unorderedList += "</ul></li>";
    }

    var jquerytreeview = $(unorderedList).appendTo("#treeViewRight");
    $("#treeViewRight").treeview({
        add: jquerytreeview
    });

}

function showCategoryDetails(index)
{
var details = "Category: " + categories[index][1]+  "\n"  + "Description: " + categories[index][2];
alert(details);
}

function showProductDetails(index)
{
var details = "Product: " + products[index][1] + "\n" + "Price: " + products[index][4]+ "\n" + "Quantity per Unit: " + products[index][3];
alert(details);
}

function openXML(XMLcategory, XMLproduct)
{
var getCategory, getProduct;

if (window.XMLHttpRequest)
{
    getCategory=new XMLHttpRequest();
    getProduct=new XMLHttpRequest();
}

getCategory.onreadystatechange=function()
{

    if (getCategory.readyState == 4 && getCategory.status == 200)
    {
        category = getCategory.responseXML.documentElement.getElementsByTagName("Categories");

        for (i=0; i < category.length; i++)
        {
            var categoryArray = new Array();
            count=0;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
            categories[i]=categoryArray;

        }
    }
}


getProduct.onreadystatechange=function()
{
    if (getProduct.readyState == 4 && getProduct.status == 200)
    {
        product = getProduct.responseXML.documentElement.getElementsByTagName("Products");
        for (i=0; i < product.length; i++)
        {
            var productArray = new Array();
            count=0;
            productArray[count++]=product[i].getElementsByTagName("ProductID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("ProductName")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("QuantityPerUnit")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("UnitPrice")[0].firstChild.nodeValue;
            products[i]=productArray;
        }   
    }
}

getCategory.open("GET", XMLcategory, true);
getCategory.send();
getProduct.open("GET", XMLproduct, true);
getProduct.send();
}

下载文件jquery.treeview.js from here

我的问题是它正在使用Firefox（即使我每次重新加载时都必须清除历史记录），但它无法在Chrome或IE上运行。我希望有人可以帮助我。谢谢。

Answer 1

你有竞争条件。您有三个异步操作，两个用于获取数据，另一个用于显示树视图。

如果显示树视图的操作不是最后一次，则它没有显示树视图所需的数据。

当获取数据的两个操作都已完成时，您应该显示树视图。如果其他处理程序已经完成，您可以在每个readystatechange处理程序的末尾进行检查。

如果要显示树视图，则需要等待文档加载（如果尚未加载）。在jQuery中使用ready事件将解决这个问题，因为如果文档没有，它将等待文档加载，并在文档已经加载时立即调用该函数。

function showTreeView() {
  $(document).ready(jquery_treeview);
}

getCategory.onreadystatechange=function()
{

    if (getCategory.readyState == 4 && getCategory.status == 200)
    {
        category = getCategory.responseXML.documentElement.getElementsByTagName("Categories");

        for (i=0; i < category.length; i++)
        {
            var categoryArray = new Array();
            count=0;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
            categories[i]=categoryArray;

        }
        if (products.length) showTreeView();
    }
}


getProduct.onreadystatechange=function()
{
    if (getProduct.readyState == 4 && getProduct.status == 200)
    {
        product = getProduct.responseXML.documentElement.getElementsByTagName("Products");
        for (i=0; i < product.length; i++)
        {
            var productArray = new Array();
            count=0;
            productArray[count++]=product[i].getElementsByTagName("ProductID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("ProductName")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("QuantityPerUnit")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("UnitPrice")[0].firstChild.nodeValue;
            products[i]=productArray;
        }
        if (categories.length) showTreeView();
    }
}

您似乎也尝试将load事件用于openXML函数。这不会奏效，因为在事件发生之前它会被jquery_treeview引用覆盖。但是，您没有将openXML函数设置为事件的事件处理程序，您正在调用该函数并将返回值设置为事件处理程序，并且由于该函数未返回函数，因此该函数不执行任何操作

在开始加载数据之前，您无需等待load事件，只需直接调用该方法：

openXML('xml_files/categories.xml','xml_files/products.xml');

为什么window.load（）在firefox中工作但在chrome中不起作用？

1 个答案: