Why do I have to use setTimeout to get this Javascript to work?

AlucardZero · 08-16-2010, 08:23 PM

Hi,

Code:

    document.body.appendChild(frame);
    setTimeout('document.getElementById("formsubmit").submit()',1);

Without the setTimeout, it sometimes submits and sometimes doesn't. If I add an alert (or a syntax error!) after line 2, then it always works. With the setTimeout, it always works. Why? Is appendChild asynchronous? Yes I'm a bit new to Javascript.

Full function (not all my code; I'm modifying it

:

Code:

function formUpload(url, html)
{
  var postURL = "http://example.net/submit.pl";

    var data = encodeURIComponent(html);
    var datalen = data.length;
    var frame = document.createElement("div");
    frame.innerHTML = "<iframe style='frameborder:0;position:fixed;top:31;right:0;width:110px;height:29px;background:#333;font-size:10' name='formframe' id='formframe'></iframe>";

    var formObj = document.createElement("form");
    formObj.id = "formsubmit"; formObj.method = "POST"; formObj.action = postURL; formObj.target = "formframe";
    formObj.style = "visibility:hidden;position:fixed;top:75%;left:25%;";
    var input1 = document.createElement("input");
    input1.type = "hidden"; input1.name = "length"; input1.value = datalen;
    var input2 = document.createElement("input");
    input2.type = "hidden"; input2.name = "url"; input2.value = url;
    var textObj = document.createElement("textarea");
    textObj.name = "text"; textObj.defaultValue = data;

    formObj.appendChild(input1); formObj.appendChild(input2);
    formObj.appendChild(textObj);

    frame.appendChild(formObj);

    document.body.appendChild(frame);
    setTimeout('document.getElementById("farmsubmit").submit()',1);
}

PehJota · 08-17-2010, 03:54 AM

You have "farmsubmit" in the long version of your code... I guess that's a copy/paste issue limited to what we see on the forums though, since you say the code does sometimes work.

I assume your JS code is within the <head> tag or somewhere else above the tag(s) with id "formsubmit"? If so, try moving that code either to a window onload handler or to somewhere below the tag(s) in question (just before the </body> tag works fine). I suggest the latter, as the onload handler doesn't get dispatched until after everything (images, etc.) loads (may be a pain on slow connections), whereas any regular code outside handlers is executed as it's read.

If this is the problem you're having and the solutions above solve it, then the issue is in the timing of the downloading/parsing and code execution. Some browsers (maybe all, I haven't tried it) seem to execute JS code as it's read, which may even be before the full HTML body is read (you can't submit a form that doesn't exist yet). Someone with more knowledge on this subject may expand on this or correct me somewhere, but from what I've observed this is basically what's happening.