appending a jquery object throws invalid arguement in IE

Question

I am trying to create a jQuery plugin that will clone a form to an iframe then submit a form. It is a hack to fake an ajax file upload. I also know there are plugins like this already, but none that I have trie meet my needs. I have a problem appending a jQuery object to anything in IE. (I am running IE 7.0) I have tried FF and it works perfectly. I am also using jQuery 1.3.2 min. Any help would be greatly appreciated.

(function($){

$.fn.extend({ 

//pass the options variable to the function
formUploader: function(options) {

 //Set the default values, use comma to separate the settings, example:
 var defaults = {
  onSubmit: function(){ return true;},
  onComplete: function(){ return true;}
 }

 var settings =  $.extend(defaults, options);

    return this.each(function() {
     $(this).submit(function(){
     var id = "asdfasda";
 $(document).find('body').append('<iframe src="javascript:false;" name="' + id + '" id="' + id + '" />');

 //this should be a form
 var curEl = this;
 setTimeout(function()
 {
  //fails in IE but not in FF
  $("#"+id).contents().find("body").append($(curEl).clone());
 },250);
 return false;
     });
    });

    }
});

})(jQuery);

Answer 1

clone a form to an iframe then submit a form

Difficult to see from the example, but if you are trying to clone an element into a different document, that's not allowed by the DOM standard. Nodes created by one document cannot be inserted into another document. The contents of an iframe are a different document.

The way to do it should be to use document.importNode():

var iframe= document.getElementById('myiframe');
var idoc= iframe.contentDocument || iframe.contentWindow.document;
var form= document.getElementById('myform');
idoc.body.appendChild(idoc.importNode(form, true));

But IE doesn't support importNode at all. Then again, IE already supports XMLHttpRequest, so that may not be an issue. What browsers are you implementing this for, that don't support XMLHttpRequest? Careful: browsers that old/broken may also not support importNode, or even jQuery!

Note that if you want to use jQuery's convenience methods to create nodes in the iframe's document, you must have a second copy of jQuery loaded by a <script> tag in the iframe, which you call via the other document's copy of $. Each jQuery instance is tied to the document that included it; a jQuery wrapper from one document cannot be passed to another document.

var inp= idoc.$('<input type="hidden" name="thing" />');
inp.val(thingvalue);
idoc.$('#myform').append(inp);
...

Answer 2

Did you look into the jQuery Form plugin, it lets you submit file input field using an iframe, check it here

Perhaps you can re-use the same rather than re-inventing the wheel.