title: Retrieving response from remote server after uploading a file in iframe
body: <p>I have a form that uploads a file in an firame to a remote server. As a result at the submission url server returns json data with the result of operation, which my iframe catches.</p>
  
  <pre><code>{'result': 'true' or 'false'}
  </code></pre>
  
  <p>Now I'd like to retrieve this json as the callback of my iframe. I know that I need jsonp to achieve this since it's a cross-site call. Here's my function with sample code from <a href="http://www.ibm.com/developerworks/library/wa-aj-jsonp1/" rel="nofollow">IBM' site</a> :</p>
  
  <pre><code>function fileUploadFunction(){     
      var fileUploadForm = $('#file_upload_form');
      fileUploadForm.attr('action', uploadURL);
      fileUploadForm.submit();
      $('#upload_target').load(function () {
          alert("IFrame loaded");
              $.getJSON(uploadUrl+"&amp;callback=?", function(data) {
                  alert("Symbol: " + data.symbol + ", Price: " + data.price);
              });
      });         
  };
  </code></pre>
  
  <p>But here few problems arise. First - my uploadUrl is just "http://something/" . Do I need it to support calls with <code>$callback=</code> suffix ?<br>
  Secondly - server gives response only as a result to file upload. So I need to get the result that is stored in my iframe and not at the specified url. How to solve this ?</p>
  
  <p>Here's the link. Notice hidden iframe inside the form. Result from server shows there. :</p>
  
  <p><strong>http://ntt.vipserv.org/artifact/</strong></p>
  
  <hr>
  
  <p>EDIT</p>
  
  <p>I've previously tried :</p>
  
  <pre><code>    $('#upload_target').load(function () {
          var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
          var data = eval("("+ret+")");
      });
  </code></pre>
  
  <p>But it raises 'permissions denied' error.</p>