Calling javascript function from ajax page

Question

I have a form where I upload a file through an ajax call containing an API call. If the API is successful I want to update a table containing the list of files. I was thinking of calling a javascript function inside the ajax page, but what I get back is that the function in undefined, I fixed that by putting clarifications.js before the javascript function.

Here is the form (at the top of the page I included the js file containing the javascript function):

<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 handle_upload.php I make the API call and at the end of the page I close the php, put the clarification.js and 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>

in the clarifications.js file I declare the function (as I said earlier I included the js file in the form page):

function createTable (result, filename) {

 if (result == 'success'){

  var success = document.getElementById('clarification_success');

  success.style.display = "block";
  success.innnerHTML = "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;

}

clarification_success is a div where I want to display a success message. table_clarification is the id of the table where I want to add the row with filename uploaded

The upload is successful but the function createTable is not defined. Edit: Solved

The other problem that I'm having is that the function can't find the id "clarification_success", I think because is looking for it in the instead of the normal page. Am I correct? If yes how can I solve it?

Note: I'm afraid I can't use jQuery, only Javascript please.

where are you importing clarifications.js to your target page? how the target page should know this script? — katrin
– katrin, Commented Oct 28, 2013 at 13:03
@katrin I think I'm not importing clarifications.js to my target page... how can I do that? — Helter Skelter
– Helter Skelter, Commented Oct 28, 2013 at 13:11

katrin · Accepted Answer · 2013-10-28 13:33:40Z

2

if i understood right - the iframe content should be the separate page. this page is dynamicaly constructed on server and returned to client as a post answer. this page should probably contain <script src="(path)/clarifications.js"></script> in the header

answered Oct 28, 2013 at 13:33

katrin

1,1661 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Helter Skelter Over a year ago

correct, but how can I include the script in the head of the iframe?

katrin Over a year ago

@Helter Skelter just add the following string to your php file before your dynamic scripts: '<script src="(path)/clarifications.js"></script>' Or you can return full html page generated by php: <html><head>(your scripts here)</head></html>

Collectives™ on Stack Overflow

Calling javascript function from ajax page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related