Question

I have a application which you can access here. If you open the application please click on the “Add” button a couple of times. This will add a new row into a table below. In each table row there is an AJAX file uploader.

The problem I have is that if you click on the “Upload” button, it shows a loading bar but the problem is that the loading bar just doesn’t go away. What was suppose to happen is that the user clicks on ‘Upload’ and then it will display the file input again and buttons with a message above stating whether file was successfully loaded or not?

Why is the loading bar never stop loading and how can I fix this?

Below is the code of the file input appended in each row and the javascript functions which it is suppose to start and stop the uploading:

<script type="text/javascript">


function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

}

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
      return true;
}

function stopUpload(success, source_form){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(source_form).find('.f1_upload_process').css('visibility','hidden');
      $(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
      $(source_form).find('.f1_upload_form').css('visibility','visible');     
      return true;   
}
</script>

Answer 1

Your upload.php file is not passing in the source_form parameter for the stopUpload() function. This is what your PHP file is returning:

window.top.window.stopUpload(0);

It has the success parameter but nothing for source_form. So these three lines of code in stopUpload() are not going to work right, because source_form is going to be undefined:

$(source_form).find('.f1_upload_process').css('visibility','hidden');
$(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
$(source_form).find('.f1_upload_form').css('visibility','visible');  

I’ve put together a fix that should work:

<script type="text/javascript">
 var sourceForm; 

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 
    var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='https://helios.hud.ac.uk/u0867587/Mobile_app/Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr);      
}

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
  sourceForm = source_form;
  return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(sourceForm).find('.f1_upload_process').css('visibility','hidden');
      $(sourceForm).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
      $(sourceForm).find('.f1_upload_form').css('visibility','visible');     
      return true;   
}
</script>

This starts by creating a new global variable called sourceForm at the very top of the block. This variable will be used to store which form the user clicked the upload button on, it is set in the startUpload() function:

sourceForm = source_form;

So as soon as the user hits Upload we will have a reference to the form they are using through the sourceForm variable. Then in stopUpload() you just use that new sourceForm variable to update the visibility and set the return message.

As a side note, you should really look into using jQuery ajax(). Using the iframe to run the JavaScript from your PHP file seems kind of difficult and cumbersome. The ajax() method is so much easier.