Question

我对Ajax / JavaScript编程比较陌生。阅读stackoverflow Q＆amp; As帮助我克服了开发项目的几个障碍。但是我遇到了一个Ajax-JavaScript计时问题，我还没有找到答案。

我的PHP / JavaScript页面涉及使用基于我从表中选择的行填充Select字段。以下是我的代码遵循的步骤序列：

当选择表中的行时，将调用populateDetails（）函数。
一个。在populateDetails（）函数中，清除下拉列表湾使用Ajax调用，它会使用适当的选项填充下拉列表 C。使用另一个Ajax调用，它从数据库中检索所选行的详细信息，并根据结果设置“选择”字段的值。

我面临的问题是，当我第一次在表格中选择一行时，未填充选择字段。只有在第二次单击该行时才会填充。

在我看来，这是一个与Ajax响应时间相关的问题 - 在Ajax响应填充下拉列表之前，populateDetails（）函数似乎正在完成其执行。由于该字段在第二次点击时填充正确，因此我认为代码中没有任何错误导致此问题。

你能告诉我如何克服这个问题吗？

    function populateDetail(myTrnID) //myTrnID is the index key of the transaction row selected in the table 
    //purpose of this function is to populate the Details section for the transaction selected
    {
        myRequest = getXMLHTTPRequest();
        myURL = "getTransactionDetails.php";
        myRequest.open("POST", myURL, true);
        myRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        myRequest.send("trnID[]=" + myTrnID + "&rand=" + parseInt(Math.random()*99999999));
        myRequest.onreadystatechange=function()
        {
            if (myRequest.readyState==4 && myRequest.status==200)
            {
                if (myRequest.responseXML)
                {
                    var xmlDoc = myRequest.responseXML;
                    var myResultRow = xmlDoc.getElementsByTagName("resultRow");
                    ....
                    ....
                    alterFields('TrnDetail','includeVoid'); 
                    ....
                    ....
                    document.getElementById("acctTrnStatus").value = myRequest.responseXML.getElementsByTagName("myReconFlg")[0].childNodes[0].nodeValue;
                    ....
                    ....
                }
            }
        }
    }

    function alterFields(myPane, statusMode) 

    {
    if (myPane == "TrnDetail")
    {
        ....
        ....
        removeOptions("acctTrnStatus"); //this function clears out the drop down list
        addDefaultOption("acctTrnStatus", "status"); //this function adds the entry "Select Status"
        if (statusMode == "includeVoid") //if condition to drive whether the option of "Void" is to be included in the drop down list
        {
            populateStatus("All", "acctTrnStatus"); //acctTrnStatus is the name of the Select field that I'm trying to populate 
        }
        else
        {
            populateStatus("Non-Void", "acctTrnStatus");
        }
        ....
        ....
    }

    function populateStatus(myType, myFieldName) 
    //this function fetches the options for the drop down list from db
    {

        var myElement = document.getElementById(myFieldName);
        var myRequest = getXMLHTTPRequest();
        var myURL="getReconFlags.php";
        myRequest.open("POST", myURL, true);
        myRequest.send("reconFlgType=" + myType + "&rand=" + parseInt(Math.random()*99999999));
        myRequest.onreadystatechange=function()
        {
            if (myRequest.readyState==4 && myRequest.status==200)
            {
                if (myRequest.responseXML)
                {
                    var xmlDoc = myRequest.responseXML;
                    var myStatusRecord = xmlDoc.getElementsByTagName("Status");
                    for (i = 0; i < myStatusRecord.length; i++)
                    {
                        var option = document.createElement("option");
                        option.value = myStatusRecord[i].getElementsByTagName("reconFlg")[0].childNodes[0].nodeValue;
                        option.text = myStatusRecord[i].getElementsByTagName("reconName")[0].childNodes[0].nodeValue;
                        myElement.add(option);
                    }
                }
            }
        }
    }

Screen shot of my page

选择字段的javascript动态填充不起作用

0 个答案: