/** * jQuery plugin for transparent submission of a form using an $.ajax-like interface. * Usage Examples: * $.transparentSubmit({dataType:'json', form:$('#myForm')}) * $('#myForm').transparentSubmit({dataType:'html'}) * Supports Deferred (.done, .fail, .when, etc.) */ (function($){ $.transparentSubmit = function(options){ var defer = $.Deferred(), // Deferred object whose promise we will hook into when adding .done, etc to calls options = $.extend({ dataType:'json' }, (options || {})), // coerce options into being an object, extend defaults name = 'target-'+Math.random().toString(36).substring(7), // assign a psuedo-random name to the frame hiframe = $(''), // create invisible iframe - NOT display:none form = $(options.form), // get form, make sure its a jquery object cleanup = function(){ hiframe.remove(); delete frames[name]; }; // clean iframe away when we're finished with it if (!form.length || form[0].tagName !== 'FORM'){ // if we don't have a form to submit, reject (call .fail) defer.reject("No form element specified to submit."); return defer.promise(); } form.attr('target', name).append(hiframe); // set target of form to iframe, and append iframe to the form // On load event, grab and parse the contents of the iframe hiframe.on('load', function(){ var res; form.removeAttr('target'); try{ if (options.dataType.indexOf('json') != -1) { // browsers will wrap a json return with
res = frames[name].document.getElementsByTagName("pre")[0].innerHTML; } else { res = frames[name].document.getElementsByTagName('body')[0].innerHTML; } }catch(e){ // Failed to receive anything in the body of the frame cleanup(); defer.reject("Failed to receive response in form target "+name+": "+e.message); return; } cleanup(); if (options.dataType.indexOf('json') != -1) { try{ res = $.parseJSON(res); }catch(e){ defer.reject("Failed to parse response into JSON: "+e.message); return; } } else if (options.dataType.indexOf('html') != -1) { res = $.parseHTML(res); } defer.resolve(res); // Finished (call .done) }); form.submit(); return defer.promise(); } /* * This allows us the option to call $('#myForm').transparentSubmit - as you can see, its just a slightly different form * to the plugin, which calls our transparentSubmit function as defined above. */ $.fn.transparentSubmit = function(options){ options.form = this; return $.transparentSubmit(options); }; })(jQuery);