自动嵌套树自动扩展无法在IE11中运行,但在Chrome中正常运行

时间:2014-11-25 22:44:12

标签: javascript html ajax

我有一个嵌套树,它是一个html表,每个元素上都有按钮,通过AJAX获取子表。这在IE和Chrome中手动完成时有效,但我有一个链接到"全部展开"选择页面上的所有向下箭头图像,然后单击它们。这发生在600毫秒的循环中,直到所有图像被点击并打开表格。这是自动点击循环的代码。

function autoClick(searchElement, clickElement) {
    setTimeout(function () {
        if ($(searchElement).length > 0) {
            $(searchElement).each(function () {
                $(this).click();
            });
            $(clickElement).click();
        }
    }, 600);
    return ($(searchElement).length);
}

它甚至没有点击树的第一级,因为当我在网络监视器上观察ajax调用时,没有被触发。以下是使用自动循环的展开和折叠功能。

function expandClick() {
if (!collapseExecuting) {
    expandExecuting = true;
    numOfExpandElements = autoClick('img[src="../Images/details_open.png"]', '#expandLink');
    if (numOfExpandElements == 0) {
        expandExecuting = false;
    }
}
}

function collapseClick() {
if (!expandExecuting) {
    collapseExecuting = true;
    numOfCollapseElements = autoClick('img[src="../Images/details_close.png"]', '#collapseLink');
    if (numOfCollapseElements == 0) {
        collapseExecuting = false;
    }
}
}

这里是Click事件处理程序:

$('#requestsTable tbody td img[data-description="toggle"]').live('click', function () { //alt="expand/collapse"
   // var nTr = this.parentNode.parentNode;
    var parentid = this.parentNode.parentNode.parentNode.parentNode.id;
    var item = this;

    if (parentid == "requestsTable") {
        getChild("request", requestTable, item, "RequestCustomers?RequestID=" + $(this).data("request"));
    }
    else if (parentid == "customerTable") {
        getChild("customer", requestTable, item, ".." + $(this).data('url') + "?RequestID=" + $(this).data("customer"));
    }
    else if (parentid == "accountTable") {
        getChild("account", requestTable, item, ".." + $(this).data('url') + "?AccountNum=" + $(this).data("account") + "&RequestID=" + $(this).data("request"));
    }
});

如果你需要在这里看到孩子,那也是:

function getChild(details, rTable, item, getCall) {
var row = item.parentNode.parentNode;
var parentid = item.parentNode.parentNode.parentNode.parentNode.id;
var rowClass = 'accountDetails';
if (item.src.match('details_close')) {
    /* This row is already open - close it */
    item.src = "../Images/details_open.png";
    $(item).attr('title', 'Expand');
    rTable.fnClose(row);
}
else {
    /* Open this row */
    item.src = "../Images/details_close.png";
    $(item).attr('title', 'Collapse');
    //set the class of the row based on the model being returned.
    if (details == 'request') {
        rowClass = 'requestDetails';
    } else if(details == 'customer') {
        rowClass = 'customerDetails';
    }
    $.get(getCall, function (response) {
        rTable.fnOpen(row, response, rowClass);
        if (response.BatchComplete) {
            $('#batchStatus').value('Batch Completed. <a href="/apps/SsaBatchReview/">Click here to send batch</a>.');
        }
    });
}   

}

1 个答案:

答案 0 :(得分:0)

我发现了正在发生的事情。在我的 ExpandClick CollapseClick 函数中,我通过SRC属性中的相对URL选择元素。显然在IE(至少IE 11)中,这些相对URL被映射,然后在源中显示为绝对URL。在Chrome中,它保留了源中的相对URL,因此我的选择器能够在Chrome中定位而不是IE。

更改了我传递给 autoClick 功能的选择器并且它有效:

function expandClick() {
    if (!collapseExecuting) {
        expandExecuting = true;
        numOfExpandElements = autoClick('img[title="Expand"]', '#expandLink');
        if (numOfExpandElements == 0) {
            expandExecuting = false;
        }
    }
}

function collapseClick() {
    if (!expandExecuting) {
        collapseExecuting = true;
        numOfCollapseElements = autoClick('img[title="Collapse"]', '#collapseLink');
        if (numOfCollapseElements == 0) {
            collapseExecuting = false;
        }
    }
}