Question

I am attempting to create an AJAX looking file uploader using IFrames in a popup modal window. Once the script runs on the target page and the file is uploaded I get a response back to my modal window with the following code:

function stopUpload(success) {
        var result = '';
        if (success == 0) {
            document.getElementById('result').innerHTML = '<div class="msg-error" style="width:492px;">There was an error during file upload!<\/div><br/>';
        } else if (success == 2) {
            document.getElementById('result').innerHTML = '<div class="msg-error" style="width:492px;">ERROR! Please upload a document with the following file types....<br/><br/>txt, doc, xls, rtf, ppt, pdf, jpg, jpeg, gif, png, xlsx, docx, png, pps, ppsx, ppt<\/div><br/>';
        } else {
            var dom_string = success;
            var dom_target = window.top.document.getElementById('table_body');
            dom_target.innerHTML = dom_string;
            document.getElementById('result').innerHTML = '<div class="msg-status" style="width:492px;">The file was uploaded successfully!<\/div><br/>';
        }
        document.getElementById('f1_upload_process').style.visibility = 'hidden';
        return true;
    }

The above code is supposed to give a success message in my modal window then update the list of files on the parent page behind the modal window so the person can process another upload. Everything works great in FF 18 but IE 9 throws the following error on the developer toolbar:

SCRIPT600: Invalid target element for this operation.

dom_target.innerHTML = dom_string;

Which I am confused by because table_body is the ID of the target and again, it works great in Firefox. Any ideas? I’m pulling my hair out.

Answer 1

From MSDN:

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can do it with DOM APIs, or you can replace the entire <table> instead.