Javascript form input value update succeeds only under debbuging conditions

Question

I had a wierd bug that I cannot figure out. I have a html table generated from CHART array of arrays. I tried to implement an element that would allow me to change the content of one row. It works fine if I use debugger and add some checkpoints but acts weird when I do not.

Function openModForm

I create a div in javascript which I add to a cell in a row in my table.

I load the input form html inside div.

JS will take information shown in current row row from CHART global variable.

I populate the value attribute of input with current values (so that if the user do not want to modify specific value it will stay the same).

    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();
}

Next the function modTask()

It is activated by forms modify button click.

It loads the values from form fields and replaces them in my CHART.

It also sends a request so the values would be changed on the server too.

    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)
        );  
    }

THE BUG

IF I have a debugger checkpoint on the openModForm line I have commented accordingly ---- everything works as intended. The input fields show the values that currently belong to this entry. I can change the fields or leave them be.

IF I remove debugging checkpoints the form input fields show empty and actually the value attributes stay empty if I do not change them empty fields will be submitted.

I cannot understand how such thing is possible. Any ideas what this bug is and how it came to be are welcome. I try to do workarounds - like generating the form fields directly from javascript as opposed to loading them from html and then updating their value attributes. BUT ID REALLY LIKE TO HAVE SOME INSIGHT WHAT THE HELL HAS HAPPENED THERE and is there a solution when I'd like to change the values of imported forms in the future.

score 2 · Accepted Answer · answered Feb 28 '17 at 15:21

2

Typically bugs like this tell me that the problem is timing. Let me explain with code:

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

In this code, the Do tons of block does not wait for #updatebox to load modform.html, so your code is trying to manipulate a form that hasn't been loaded yet. The reason this works in the debugger is that while you debug, the load finishes quietly in the background before you continue to the block. Without the debugger, the code executes immediately and the load is not completed before you try to manipulate the form.

Here is a simple fix:

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

This will wait for load to complete before attempting to Do tons of stuff.

Here's a the documentation for .load().

answered Feb 28 '17 at 15:21

01010011 01000010

356
3
8

Good explanation. – DomeTune Feb 28 '17 at 15:25
I'm glad it was clear – 01010011 01000010 Feb 28 '17 at 15:31
Nice clear explanation with applicable solution. – Jens-Konrad Preem Feb 28 '17 at 16:15
I'm happy to help, if you could do me a favor and mark this as the best answer I'd appreciate it @Jens-Konrad Preem – 01010011 01000010 Feb 28 '17 at 18:19

Javascript form input value update succeeds only under debbuging conditions

1 Answers1