Question

setTimeout( function () {
    ajaxLoadFormHeader("A", nRequest_ID, nJeppesen_Number); 
    ajaxLoadFormHeader("B", nRequest_ID, nJeppesen_Number);

    spinner.stop();

    if (document.getElementById("txt_A_Primary_Permits").checked ) {
        showRouting("A");
    }

    if (document.getElementById("txt_B_Primary_Permits").checked ) {
        showRouting("B");
    }
}, 500);

该页面有两个div，用于保存我们正在使用的A和B路由信息。我通过隐藏一个并在按钮点击上显示另一个来切换它们。

ajaxLoadFormHeader（）函数将服务器中的数据加载到每个标题表单上的text和checkbox元素中。

在调用ajaxLoadFormheader（）之后，我查看每个表单中的复选框元素，并根据检查的内容，显示路由div并隐藏另一个。

这就是问题所在。在从ajaxLoadFormHeader（）函数返回之后，当我检查＆＃34; .checked＆＃34;复选框元素的状态，它们不反映ajaxLoadFormHeader（）也只是设置它们的更改。在ajaxLoadFormHeader（）调用结束时，值没有改变。

我怀疑问题与代码如何更改DOM值有关，并且在当前代码块关闭之前，更改并不完整且有效。换句话说，在完成setTimeout（）函数之前，DOM更改是不可见的？

细节：调用ajaxLoadFormHeader（）函数后，即使它确实设置了其中一个复选框的已检查状态，也可以选择（txt_A_Primary_Permits.checked）和（txt_B_Primary_Permits.checked）返回false - 即使表单加载并显示选中的框。

注意：这不是所有代码。用于检测是否未选中复选框或处理两者的错误条件的代码。我只提供相关代码供您查看问题。

Answer 1

AJAX中的第一个A代表异步。如果您的请求确实是异步的，那意味着您的代码会在后台执行请求时继续运行。这意味着在请求仍然繁忙时停止微调器并评估ifs，因此复选框的状态尚未更新。

解决此问题的正确方法是将回调或事件处理程序附加到请求完成时调用的请求。现在确切的细节取决于您实施ajaxLoadFormHeader的方式，因此很难提供，但希望这些信息至少可以帮助您找到正确的解决方案。

一个很好的起点是this question，使用onreadystatechange事件回答了'普通的'JavaScript'AJAX示例。

DOM元素在javascript代码中变化不可见

1 个答案: