title: Never-ending "Connecting" message after AJAX form submit
body: <p>I have a class which enables forms with a file-type input to be submitted via AJAX. It creates a hidden <code>IFRAME</code> element, changes the form <code>target</code> property so that it submits to the <code>IFRAME</code>, submits the form, then changes the target back to what it was. It also adds an <code>onLoad</code> event to the <code>IFRAME</code> so I can get a callback. The <code>onLoad</code> function also removes the <code>IFRAME</code> from the page before firing my callback function.</p>
  
  <p>The class works perfectly, I get the callback as expected. In Firebug's Net panel, I see the request, I see the response, all is well. But, as soon as the submit starts, the browser tab for the page changes to "Connecting" with the loading spinner and never changes back. It makes the tab appear to be loading, this will go on for <em>days</em> if I leave the browser open.</p>
  
  <p><img src="https://i.stack.imgur.com/C4RAF.png" alt="The never-ending &quot;Connecting&quot; message that plagues me"></p>
  
  <p>The question, then, is: <strong>Is there any way for me to stop this manually, or is there some other way that I can prevent it from starting?</strong></p>
  
  <p>Here are the Response Headers as taken from the Net panel:</p>
  
  <pre><code>Date    Fri, 02 Sep 2011 15:23:15 GMT
  Server  Apache/2.2.10 (Win32) PHP/5.3.1
  X-Powered-By    PHP/5.3.1
  Expires Thu, 19 Nov 1981 08:52:00 GMT
  Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
  Pragma  no-cache
  Set-Cookie  PHPSESSID=agncdnha86mtci7dmuvriobak2; path=/
  Content-Length  165
  Keep-Alive  timeout=5, max=100
  Connection  Keep-Alive
  Content-Type    text/html
  </code></pre>
  
  <p>And a capture of the Net panel below. The POST is from the submission of the form, the GET is caused by the callback function, it is changing the source of an image on the page.</p>
  
  <p><img src="https://i.stack.imgur.com/lnypp.png" alt="Screenshot of Firebug&#39;s Net panel"></p>
  
  <p>This is not specific to this page, it happens anywhere I use this technique to submit a file/image via an <code>IFRAME</code>. This affects my current version of Firefox (6.0), but also affected previous versions (5.x, 4.x, 3.x). The fact that the <code>IFRAME</code> is removed from the page after it loads makes this especially baffling - even if the request never finished, the removal of the element should effectively kill/stop and "connecting" that the browser thinks is happening.</p>
  
  <p><strong>UPDATE</strong>
  Per the answer from @Sidnicious, I added a timeout to the callback function to introduce a delay in removal of the <code>IFRAME</code> element. I experimented with the length of the delay, even a 1ms delay is adequate. This certainly qualifies as a work-around, but I'd still like to know if anyone can shed some light on to the <strong>why</strong> of it, preferably leading to an avoidance of using the timeout all together. I've included the modified code (with the timeout) below, in case it is helpful. This is the <code>onLoad</code> event for the <code>IFRAME</code> (<code>io</code> us a reference to the frame element):</p>
  
  <pre><code>        var obj={};
          var success = true;
          try{
              obj.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
              obj.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
          }
          catch(e){ success = false; }
          if( success ){
              this.fireEvent('onSuccess', obj.responseText );
          }else{
              this.fireEvent('onFailure', obj );
          }
          this.fireEvent('onComplete', obj );
          io.removeEvent('load', uploadCallback );
          setTimeout(function () { // &lt;--- this timeout prevents the issue
              io.dispose();
          }, 1);
  </code></pre>