I have a form where I upload a file using an ajax call that includes an API request. Once the API call is successful, I need to update a table displaying the list of uploaded files. Initially, I attempted calling a JavaScript function within the ajax page, but encountered an issue where the function was undefined. I resolved this by ensuring that clarifications.js is included before the JavaScript function.
Below is the form (the JavaScript file with the function is included at the top of the page):
<div class='input_table_title'>Upload file:</div>
<div style='float:left;'>
<form name='upload_my_files' action='ajax/clarifications/handle_upload.php' method='post' enctype='multipart/form-data' target='upload_target'>
<input type='file' name='file_upload' />
<input type='hidden' name='notification_id' value='<?php echo $value->NotifiNumber; ?>' />
<input type='submit' value='Upload'>
</form>
<iframe id='upload_target' name='upload_target' src='' style='width:0;height:0;border:0px solid #fff;'></iframe>
</div>
In the handle_upload.php file, I make the API call and at the end include clarifications.js before calling the function:
<script src="(position)/clarifications.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
createTable("<?php echo $outcome ?>", "<?php echo $uploaded_filename ?>");
</script>
The clarifications.js file contains the declared function (which is also included in the form page):
function createTable(result, filename) {
if (result == 'success'){
var success = document.getElementById('clarification_success');
success.style.display = "block";
success.innerHTML = "File "+filename+" successfully uploaded.";
// Update the list of uploads
var list = document.getElementById('table_clarification');
var myElement = document.createElement("td");
myElement.innerHTML = filename;
list.appendChild(myElement);
}
return true;
}
The div clarification_success is used to display a success message, while the table_clarification ID is for adding the uploaded filename's row.
The upload is successful, though initially the createTable function was not defined. Edit: Resolved
Another issue I'm facing is that the function cannot find the ID "clarification_success", likely because it's looking within the iframe instead of the main page. Is my assumption correct? If so, how can I address this?
Note: Due to restrictions, I am unable to use jQuery and must rely on pure JavaScript.