title: Trouble triggering actions on iframe load/ready event (jquery)
body: <p>I have an admin panel where I want to upload pictures associated to a product. I have separated the upload to an iframe and the picture preview to another iframe so I don't have to reload the entire page every time a form is submited. Right now it looks like this (added border for reference):</p>
  
  <p><img src="https://i.stack.imgur.com/1dHmx.gif" alt="enter image description here"></p>
  
  <p>I'd like to:</p>
  
  <ul>
  <li>Since the height of both iframes is variable (it depends on the quantity of pictures in the second, and a feedback message is shown on the fist after an upload has been made): set the height of the iframe to fit the height of the body content.</li>
  <li>Show a progress bar gif after the upload form has been submitted, and hide it when the frame has finished loading.</li>
  <li>Reload the preview frame after the upload form has finished loading after a form submit, so it shows the new picture that has been added.</li>
  </ul>
  
  <p>My code looks like this right now:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
  Subir imagen:
  &lt;span class="loading_bar"&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;iframe name="upload_iframe" class="upload_iframe" src="upload.php" scrolling="no"&gt;&lt;/iframe&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
  &lt;iframe name="slideshow_iframe" class="slideshow_iframe" src="slideshow.php" scrolling="no"&gt;&lt;/iframe&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>//&lt;!--
  $(document).ready(function(){
      // ------------------ UPLOAD ------------------
  
      // On any frame load
      $("iframe").load(function() {
          // Change frame's height to be the same as the contents body's height
          var iframe_height = $(this).contents().find('body').height();
          $(this).height(iframe_height);
          // Control point
          alert("Frame: "+$(this).attr("class")+" | Content height: "+iframe_height+" | Frame height: "+$(this).height());
      });
  
      // On "iframe_upload" load
      $("iframe.upload_iframe").load(function() {
          // Hide progress bar
          $(this).prev("span.loading_bar").hide();
          // Reload "iframe_slideshow"
          $("iframe.upload_slideshow").attr("src",$("iframe.upload_slideshow").attr("src"));
      });
  
      // On "select file" change
      $(".upload_form_upload").change(function() {
          var parent_element = "#"+$(this).closest("form").attr("id");
          // Show progress bar
          $(parent_element+" span.loading_bar", parent.document).show();
          // Submit upload form
          $(this).closest("form").submit();
      });
  }); 
  //--&gt; 
  </code></pre>
  
  <p>Now the trouble:</p>
  
  <ul>
  <li>The actions under load never trigger, not when the website is first loaded, nor when the form is submitted.</li>
  <li>If i change .load() for .ready(), when the website is loaded everything inside $("iframe").ready() { triggers twice for each iframe and what is under $("iframe.upload_iframe").ready() is never triggered. Even though I get to the alert, the new height is not set.</li>
  <li>This is what I get from the alert under "Control Point":</li>
  </ul>
  
  <p>On page load, first time:</p>
  
  <p><img src="https://i.stack.imgur.com/pco2m.gif" alt="enter image description here"></p>
  
  <p>On page load, second time:</p>
  
  <p><img src="https://i.stack.imgur.com/E3zvR.gif" alt="enter image description here"></p>
  
  <p>After submit:</p>
  
  <p><img src="https://i.stack.imgur.com/lVirl.gif" alt="enter image description here"></p>