Php/ajax files uploading: hidden iframe loads more than once

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

...

Let me search my crystal ball and have a look.

hakre
– hakre

2012-01-31 11:49:42 +00:00
Commented Jan 31, 2012 at 11:49 — hakre
– hakre, Commented Jan 31, 2012 at 11:49
Post a code so we could help you.

Wojciech Jasiński
– Wojciech Jasiński

2012-01-31 11:58:18 +00:00
Commented Jan 31, 2012 at 11:58 — Wojciech Jasiński
– Wojciech Jasiński, Commented Jan 31, 2012 at 11:58

Eddie · Accepted Answer · 2012-01-31 12:35:05Z

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).

answered Jan 31, 2012 at 12:35

Eddie

1,6838 gold badges25 silver badges46 bronze badges

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

3 Comments

Arsen Kazydub Over a year ago

I removed onsubmit function. Now I always see 2 alerts, despite the order number of the uploaded file.

Eddie Over a year ago

Maybe there are more than 1 error, I just noticed this one. But now their number is no longer growing)

Arsen Kazydub Over a year ago

Eddie, your notice has pointed me to the root of the problem. I added working code. Thank you very much!

Collectives™ on Stack Overflow

Php/ajax files uploading: hidden iframe loads more than once

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related