Question

I am uploading files via an iframe. I am sending my uploaded files to a php page that returns either a number to display a message or a block of html that I’d like to use to replace a table on my parent page that lists all uploaded files for that user. On my php processing page I have:

upload_process.php

<script language="javascript" type="text/javascript"> 
window.top.window.stopUpload(<?php echo $result;?>);
</script> 

$result is returning:

<tr><td><input name='checkbox[]' type='checkbox' id='checkbox[]' value='43'></td><td><a href='../php/viewimages.php?id=13')'>New One</a></td><td>Clincal Literature</td><td>2012-11-11</td></tr>

Firebug is throwing: SyntaxError: XML tag name mismatch (expected input) and has an arrow pointing to the </td> after value=43

The function that is running on the home page when I get this error is:

<script type="text/javascript">
    function startUpload() {
        document.getElementById('f1_upload_process').style.visibility = 'visible';
        return true;
    }

    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 {
            window.top.document.getElementById('attachment_table').innerHTML = result;
            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;
    }
</script>

Can someone point me in the direction of what I’m doing wrong? I’m a self taught noob and I usually use jquery/ajax for this solution but since I’m dealing with files I’m forced to use iframe on this. Thx!

Answer 1

Your upload_process.php seems to have a few escaping problems. According to your question, the following is returned (also check this with Firebug):

<script language="javascript" type="text/javascript"> 
window.top.window.stopUpload(<tr><td><input name='checkbox[]' type='checkbox' id='checkbox[]' value='43'></td><td><a href='../php/viewimages.php?id=13')'>New One</a></td><td>Clincal Literature</td><td>2012-11-11</td></tr>);
</script> 

It seems to be XML-parsed (or at least by something that throws an XML-related error), and says that the <input> tag is not properly closed but immediately followed by </td>. You should always output script contents inside a cdata-section, enclose them into a comment or escape the tags and quotes.

Also, check content-type headers and HTML doctypes etc of your answer, they might not be correct. It does not consist only of the <script> tag, does it?

Next, the arguments you pass to the JS-function stopUpload should be a string. The plain HTML string there makes the script invalid. Enclose it in quotes, and escape any quotes inside (it’s OK, you’ve used apostrophes only for now).