Question

我有一个我无法弄清楚的奇怪的错误。我有一个从CHART数组数组生成的html表。我试图实现一个允许我改变一行内容的元素。如果我使用调试器并添加一些检查点，但是当我不使用调试器时它会很奇怪。

功能openModForm

我在javascript中创建了一个div，我将其添加到表格中的一个单元格中。

我在div中加载输入表单html。

JS将从CHART全局变量中获取当前行行中显示的信息。

我用当前值填充输入的value属性（这样如果用户不想修改特定值，它将保持不变）。

    function openModForm(x) 
    {

        var updatebox = document.createElement("div");
        //we keep only one updatebox open at any time, right now i think to attach it to row
        updatebox.id = 'updatebox';
        //so that the click on updatebox won't trigger the parent (modcell) function which would create more updateboxes
        updatebox.addEventListener("click", stopEvent, false);
        x.appendChild(updatebox);
        //load form html to div
        $("#updatebox").load("modform.html");
        //populate modform with default values
        var rowind = x.parentElement.rowIndex;
        var task = CHART[rowind-1][1];
        var person = CHART[rowind-1][2];
        var start = CHART[rowind-1][3];
        var end  = CHART[rowind-1][4];//if i add debugger checkpoint here everything works as intended!
        document.forms["UpdateForm"]["TaskInput"].value=task;
        document.forms["UpdateForm"]["RespInput"].value=person;
        document.forms["UpdateForm"]["StartInput"].value=start;
        document.forms["UpdateForm"]["EndInput"].value=end;

    }

function stopEvent(ev) 
{
    ev.stopPropagation();
}

接下来的函数modTask（）

通过表单修改按钮单击激活它。

它从表单字段加载值并将其替换为我的CHART。

它还发送请求，以便在服务器上更改值。

    function modTask()
    {
        var rowind = document.getElementById("updatebox").parentElement.parentElement.rowIndex;
        var taskid = CHART[rowind-1][0];
        var task = document.forms["UpdateForm"]["TaskInput"].value;
        var person = document.forms["UpdateForm"]["RespInput"].value;
        var start = document.forms["UpdateForm"]["StartInput"].value;
        var end  = document.forms["UpdateForm"]["EndInput"].value;
        var chartID=CHART[0][5];
        var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.onreadystatechange=function()
        {
            if (this.readyState==4 && this.status==200) 
            {

                document.getElementById("MessageArea").innerHTML=this.responseText;
                //set new CHART values
                CHART[rowind-1][1]=task;
                CHART[rowind-1][2]=person;
                CHART[rowind-1][3]=start;
                CHART[rowind-1][4]=end;
                //remove updatebox from modcell after work is done
                var p=document.getElementById("updatebox").parentElement;
                p.removeChild(p.childNodes[1]);
            }
        }

        xhr.open( "POST", "mod_task.php", true );
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send( "taskid="+encodeURIComponent(taskid)
        +"&task="+encodeURIComponent(task)
        +"&person="+encodeURIComponent(person)
        +"&start="+encodeURIComponent(start)
        +"&end="+encodeURIComponent(end)
        +"&chid="+encodeURIComponent(chartID)
        );  
    }

BUG

如果我在openModForm行上有一个调试器检查点，我已经相应地评论了----一切都按预期工作。输入字段显示当前属于此条目的值。我可以改变字段或留下它们。

如果我删除调试检查点，表单输入字段显示为空，实际值属性保持为空，如果我不更改它们将提交空字段。

我无法理解这样的事情是怎么可能的。任何想法这个错误是什么以及它是如何成为欢迎。我尝试做变通办法 - 比如直接从javascript生成表单字段，而不是从html加载它们然后更新它们的值属性。但是我真的很想知道HELL在哪里发生了什么，并且当我想在未来改变导入表格的价值时有解决方案。

Answer 1

通常这样的错误告诉我问题是时机问题。让我用代码解释一下：

    $("#updatebox").load("modform.html");
    // Do tons of stuff

在此代码中，Do ton of block不会等待#updatebox加载modform.html，因此您的代码正在尝试操作尚未加载的表单。这在调试器中起作用的原因是，在调试时，在继续执行块之前，负载在后台安静地完成。如果没有调试器，代码会立即执行，并且在您尝试操作表单之前未完成加载。

这是一个简单的修复：

    $("#updatebox").load("modform.html", function(){
      // Do tons of stuff
    });

在尝试做大量的事情之前，这将等待负载完成。

以下是.load()的文档。

Javascript表单输入值更新仅在debbuging条件下成功

1 个答案: