Question

My problem occurs, when I upload images with ajax. Ajax response comes to a hidden iframe, and for debug I echo it (uploaded image name) here and then alert it. So when I upload the first image – there’s one alert, as it should be. When I upload the 2nd – I see 2 alerts. The 3rd – 3 alerts. And so on. It means, that my iframe reloads as many times, as the order number of the file being just uploaded.

Interesting, that the names in alerts after each file upload are always the same. For example, 2 times “mySecondImage.jpg”, 3 times “myThirdImage.jpg”…

What can be done to solve the problem? Thanks.

// FUNCTION - AJAX FILE UPLOADER
// this function creates new elements, but only in case, when user uploads files
$.fn.fileUploader = function ( $inputName ) {

  var $body = $(this);
  var $form = $body.parents('form');
  var $fileInput = $body.find(':file');
  // after file is uploaded, we need the file input to be empty again
  var $fileInputEmpty = '<input type="file" name="' + $inputName + '" />';
  var $iframe = $('#ajaxResult');

  // user submits the form
  $form.submit( function() {
    // check the result
    $iframe.load( function () {
      var $response = $iframe.contents().find('body').html();
      alert($response); // debug

      // add new content image
      $output = createUpdateImage( $response, $('[name="imageLinkURL"]').val() );

      // add new element
      addNewElement( $output );

      // success
      if ( $response.length ) {
        $fileInput.replaceWith( $fileInputEmpty );
        $fileInput = $body.find(':file');
      }
    });
  }); // form submit

};

$('.fileUploder').each(function () {
  var $inputName = $(this).find(':file').attr('name');
  $(this).fileUploader( $inputName );
});

Well, the glitch is fixed!
I slightly rewrote the jQuery function:

...

// user submits the form
$form.submit( function() {

  var $response = '';

  $iframe.load( function () {
    $response = $iframe.contents().find('body').html();
  });

  // periodically check the result in iframe
  var $timer = setInterval( function() {
    if ( $response != '' ) {
      clearInterval( $timer );
      // do all required actions
    }
  }, 100 );

}); // form submit

...

Answer 1

$form.submit( function() {
    $iframe.load( function () {

I think the problem is here. On form submit you add an event “on load”. So it called 1 time, then 2 times, etc. Maybe removing the first of these two strings can help (use only load event handler).