summaryrefslogtreecommitdiff
path: root/static/js
diff options
context:
space:
mode:
authorsostler <sbostler@gmail.com>2010-01-29 01:04:51 -0500
committersostler <sbostler@gmail.com>2010-01-29 01:04:51 -0500
commit99cc0ef49a1d087401dbd8e1cfabc7c8d5cc2104 (patch)
treeb5dd5d9ab45838dfd2bbd68bfc3ebbaa33207f48 /static/js
parent358b2538c496dc873b31ea3c1a84263604f63016 (diff)
Image uploading initial commit
Diffstat (limited to 'static/js')
-rwxr-xr-xstatic/js/ajaxupload.js673
-rwxr-xr-xstatic/js/jquery.form.js660
2 files changed, 1333 insertions, 0 deletions
diff --git a/static/js/ajaxupload.js b/static/js/ajaxupload.js
new file mode 100755
index 0000000..7e51768
--- /dev/null
+++ b/static/js/ajaxupload.js
@@ -0,0 +1,673 @@
+/**
+ * AJAX Upload ( http://valums.com/ajax-upload/ )
+ * Copyright (c) Andris Valums
+ * Licensed under the MIT license ( http://valums.com/mit-license/ )
+ * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions
+ */
+(function () {
+ /* global window */
+ /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */
+
+ /**
+ * Wrapper for FireBug's console.log
+ */
+ function log(){
+ if (typeof(console) != 'undefined' && typeof(console.log) == 'function'){
+ Array.prototype.unshift.call(arguments, '[Ajax Upload]');
+ console.log( Array.prototype.join.call(arguments, ' '));
+ }
+ }
+
+ /**
+ * Attaches event to a dom element.
+ * @param {Element} el
+ * @param type event name
+ * @param fn callback This refers to the passed element
+ */
+ function addEvent(el, type, fn){
+ if (el.addEventListener) {
+ el.addEventListener(type, fn, false);
+ } else if (el.attachEvent) {
+ el.attachEvent('on' + type, function(){
+ fn.call(el);
+ });
+ } else {
+ throw new Error('not supported or DOM not loaded');
+ }
+ }
+
+ /**
+ * Attaches resize event to a window, limiting
+ * number of event fired. Fires only when encounteres
+ * delay of 100 after series of events.
+ *
+ * Some browsers fire event multiple times when resizing
+ * http://www.quirksmode.org/dom/events/resize.html
+ *
+ * @param fn callback This refers to the passed element
+ */
+ function addResizeEvent(fn){
+ var timeout;
+
+ addEvent(window, 'resize', function(){
+ if (timeout){
+ clearTimeout(timeout);
+ }
+ timeout = setTimeout(fn, 100);
+ });
+ }
+
+ // Needs more testing, will be rewriten for next version
+ // getOffset function copied from jQuery lib (http://jquery.com/)
+ if (document.documentElement.getBoundingClientRect){
+ // Get Offset using getBoundingClientRect
+ // http://ejohn.org/blog/getboundingclientrect-is-awesome/
+ var getOffset = function(el){
+ var box = el.getBoundingClientRect();
+ var doc = el.ownerDocument;
+ var body = doc.body;
+ var docElem = doc.documentElement; // for ie
+ var clientTop = docElem.clientTop || body.clientTop || 0;
+ var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+ // In Internet Explorer 7 getBoundingClientRect property is treated as physical,
+ // while others are logical. Make all logical, like in IE8.
+ var zoom = 1;
+ if (body.getBoundingClientRect) {
+ var bound = body.getBoundingClientRect();
+ zoom = (bound.right - bound.left) / body.clientWidth;
+ }
+
+ if (zoom > 1) {
+ clientTop = 0;
+ clientLeft = 0;
+ }
+
+ var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft;
+
+ return {
+ top: top,
+ left: left
+ };
+ };
+ } else {
+ // Get offset adding all offsets
+ var getOffset = function(el){
+ var top = 0, left = 0;
+ do {
+ top += el.offsetTop || 0;
+ left += el.offsetLeft || 0;
+ el = el.offsetParent;
+ } while (el);
+
+ return {
+ left: left,
+ top: top
+ };
+ };
+ }
+
+ /**
+ * Returns left, top, right and bottom properties describing the border-box,
+ * in pixels, with the top-left relative to the body
+ * @param {Element} el
+ * @return {Object} Contains left, top, right,bottom
+ */
+ function getBox(el){
+ var left, right, top, bottom;
+ var offset = getOffset(el);
+ left = offset.left;
+ top = offset.top;
+
+ right = left + el.offsetWidth;
+ bottom = top + el.offsetHeight;
+
+ return {
+ left: left,
+ right: right,
+ top: top,
+ bottom: bottom
+ };
+ }
+
+ /**
+ * Helper that takes object literal
+ * and add all properties to element.style
+ * @param {Element} el
+ * @param {Object} styles
+ */
+ function addStyles(el, styles){
+ for (var name in styles) {
+ if (styles.hasOwnProperty(name)) {
+ el.style[name] = styles[name];
+ }
+ }
+ }
+
+ /**
+ * Function places an absolutely positioned
+ * element on top of the specified element
+ * copying position and dimentions.
+ * @param {Element} from
+ * @param {Element} to
+ */
+ function copyLayout(from, to){
+ var box = getBox(from);
+
+ addStyles(to, {
+ position: 'absolute',
+ left : box.left + 'px',
+ top : box.top + 'px',
+ width : from.offsetWidth + 'px',
+ height : from.offsetHeight + 'px'
+ });
+ }
+
+ /**
+ * Creates and returns element from html chunk
+ * Uses innerHTML to create an element
+ */
+ var toElement = (function(){
+ var div = document.createElement('div');
+ return function(html){
+ div.innerHTML = html;
+ var el = div.firstChild;
+ return div.removeChild(el);
+ };
+ })();
+
+ /**
+ * Function generates unique id
+ * @return unique id
+ */
+ var getUID = (function(){
+ var id = 0;
+ return function(){
+ return 'ValumsAjaxUpload' + id++;
+ };
+ })();
+
+ /**
+ * Get file name from path
+ * @param {String} file path to file
+ * @return filename
+ */
+ function fileFromPath(file){
+ return file.replace(/.*(\/|\\)/, "");
+ }
+
+ /**
+ * Get file extension lowercase
+ * @param {String} file name
+ * @return file extenstion
+ */
+ function getExt(file){
+ return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : '';
+ }
+
+ function hasClass(el, name){
+ var re = new RegExp('\\b' + name + '\\b');
+ return re.test(el.className);
+ }
+ function addClass(el, name){
+ if ( ! hasClass(el, name)){
+ el.className += ' ' + name;
+ }
+ }
+ function removeClass(el, name){
+ var re = new RegExp('\\b' + name + '\\b');
+ el.className = el.className.replace(re, '');
+ }
+
+ function removeNode(el){
+ el.parentNode.removeChild(el);
+ }
+
+ /**
+ * Easy styling and uploading
+ * @constructor
+ * @param button An element you want convert to
+ * upload button. Tested dimentions up to 500x500px
+ * @param {Object} options See defaults below.
+ */
+ window.AjaxUpload = function(button, options){
+ this._settings = {
+ // Location of the server-side upload script
+ action: 'upload.php',
+ // File upload name
+ name: 'userfile',
+ // Additional data to send
+ data: {},
+ // Submit file as soon as it's selected
+ autoSubmit: true,
+ // The type of data that you're expecting back from the server.
+ // html and xml are detected automatically.
+ // Only useful when you are using json data as a response.
+ // Set to "json" in that case.
+ responseType: false,
+ // Class applied to button when mouse is hovered
+ hoverClass: 'hover',
+ // Class applied to button when AU is disabled
+ disabledClass: 'disabled',
+ // When user selects a file, useful with autoSubmit disabled
+ // You can return false to cancel upload
+ onChange: function(file, extension){
+ },
+ // Callback to fire before file is uploaded
+ // You can return false to cancel upload
+ onSubmit: function(file, extension){
+ },
+ // Fired when file upload is completed
+ // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
+ onComplete: function(file, response){
+ }
+ };
+
+ // Merge the users options with our defaults
+ for (var i in options) {
+ if (options.hasOwnProperty(i)){
+ this._settings[i] = options[i];
+ }
+ }
+
+ // button isn't necessary a dom element
+ if (button.jquery){
+ // jQuery object was passed
+ button = button[0];
+ } else if (typeof button == "string") {
+ if (/^#.*/.test(button)){
+ // If jQuery user passes #elementId don't break it
+ button = button.slice(1);
+ }
+
+ button = document.getElementById(button);
+ }
+
+ if ( ! button || button.nodeType !== 1){
+ throw new Error("Please make sure that you're passing a valid element");
+ }
+
+ if ( button.nodeName.toUpperCase() == 'A'){
+ // disable link
+ addEvent(button, 'click', function(e){
+ if (e && e.preventDefault){
+ e.preventDefault();
+ } else if (window.event){
+ window.event.returnValue = false;
+ }
+ });
+ }
+
+ // DOM element
+ this._button = button;
+ // DOM element
+ this._input = null;
+ // If disabled clicking on button won't do anything
+ this._disabled = false;
+
+ // if the button was disabled before refresh if will remain
+ // disabled in FireFox, let's fix it
+ this.enable();
+
+ this._rerouteClicks();
+ };
+
+ // assigning methods to our class
+ AjaxUpload.prototype = {
+ setData: function(data){
+ this._settings.data = data;
+ },
+ disable: function(){
+ addClass(this._button, this._settings.disabledClass);
+ this._disabled = true;
+
+ var nodeName = this._button.nodeName.toUpperCase();
+ if (nodeName == 'INPUT' || nodeName == 'BUTTON'){
+ this._button.setAttribute('disabled', 'disabled');
+ }
+
+ // hide input
+ if (this._input){
+ // We use visibility instead of display to fix problem with Safari 4
+ // The problem is that the value of input doesn't change if it
+ // has display none when user selects a file
+ this._input.parentNode.style.visibility = 'hidden';
+ }
+ },
+ enable: function(){
+ removeClass(this._button, this._settings.disabledClass);
+ this._button.removeAttribute('disabled');
+ this._disabled = false;
+
+ },
+ /**
+ * Creates invisible file input
+ * that will hover above the button
+ * <div><input type='file' /></div>
+ */
+ _createInput: function(){
+ var self = this;
+
+ var input = document.createElement("input");
+ input.setAttribute('type', 'file');
+ input.setAttribute('name', this._settings.name);
+
+ addStyles(input, {
+ 'position' : 'absolute',
+ // in Opera only 'browse' button
+ // is clickable and it is located at
+ // the right side of the input
+ 'right' : 0,
+ 'margin' : 0,
+ 'padding' : 0,
+ 'fontSize' : '480px',
+ 'cursor' : 'pointer'
+ });
+
+ var div = document.createElement("div");
+ addStyles(div, {
+ 'display' : 'block',
+ 'position' : 'absolute',
+ 'overflow' : 'hidden',
+ 'margin' : 0,
+ 'padding' : 0,
+ 'opacity' : 0,
+ // Make sure browse button is in the right side
+ // in Internet Explorer
+ 'direction' : 'ltr',
+ //Max zIndex supported by Opera 9.0-9.2
+ 'zIndex': 2147483583
+ });
+
+ // Make sure that element opacity exists.
+ // Otherwise use IE filter
+ if ( div.style.opacity !== "0") {
+ if (typeof(div.filters) == 'undefined'){
+ throw new Error('Opacity not supported by the browser');
+ }
+ div.style.filter = "alpha(opacity=0)";
+ }
+
+ addEvent(input, 'change', function(){
+
+ if ( ! input || input.value === ''){
+ return;
+ }
+
+ // Get filename from input, required
+ // as some browsers have path instead of it
+ var file = fileFromPath(input.value);
+
+ if (false === self._settings.onChange.call(self, file, getExt(file))){
+ self._clearInput();
+ return;
+ }
+
+ // Submit form when value is changed
+ if (self._settings.autoSubmit) {
+ self.submit();
+ }
+ });
+
+ addEvent(input, 'mouseover', function(){
+ addClass(self._button, self._settings.hoverClass);
+ });
+
+ addEvent(input, 'mouseout', function(){
+ removeClass(self._button, self._settings.hoverClass);
+
+ // We use visibility instead of display to fix problem with Safari 4
+ // The problem is that the value of input doesn't change if it
+ // has display none when user selects a file
+ input.parentNode.style.visibility = 'hidden';
+
+ });
+
+ div.appendChild(input);
+ document.body.appendChild(div);
+
+ this._input = input;
+ },
+ _clearInput : function(){
+ if (!this._input){
+ return;
+ }
+
+ // this._input.value = ''; Doesn't work in IE6
+ removeNode(this._input.parentNode);
+ this._input = null;
+ this._createInput();
+
+ removeClass(this._button, this._settings.hoverClass);
+ },
+ /**
+ * Function makes sure that when user clicks upload button,
+ * the this._input is clicked instead
+ */
+ _rerouteClicks: function(){
+ var self = this;
+
+ // IE will later display 'access denied' error
+ // if you use using self._input.click()
+ // other browsers just ignore click()
+
+ addEvent(self._button, 'mouseover', function(){
+ if (self._disabled){
+ return;
+ }
+
+ if ( ! self._input){
+ self._createInput();
+ }
+
+ var div = self._input.parentNode;
+ copyLayout(self._button, div);
+ div.style.visibility = 'visible';
+
+ });
+
+
+ // commented because we now hide input on mouseleave
+ /**
+ * When the window is resized the elements
+ * can be misaligned if button position depends
+ * on window size
+ */
+ //addResizeEvent(function(){
+ // if (self._input){
+ // copyLayout(self._button, self._input.parentNode);
+ // }
+ //});
+
+ },
+ /**
+ * Creates iframe with unique name
+ * @return {Element} iframe
+ */
+ _createIframe: function(){
+ // We can't use getTime, because it sometimes return
+ // same value in safari :(
+ var id = getUID();
+
+ // We can't use following code as the name attribute
+ // won't be properly registered in IE6, and new window
+ // on form submit will open
+ // var iframe = document.createElement('iframe');
+ // iframe.setAttribute('name', id);
+
+ var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
+ // src="javascript:false; was added
+ // because it possibly removes ie6 prompt
+ // "This page contains both secure and nonsecure items"
+ // Anyway, it doesn't do any harm.
+ iframe.setAttribute('id', id);
+
+ iframe.style.display = 'none';
+ document.body.appendChild(iframe);
+
+ return iframe;
+ },
+ /**
+ * Creates form, that will be submitted to iframe
+ * @param {Element} iframe Where to submit
+ * @return {Element} form
+ */
+ _createForm: function(iframe){
+ var settings = this._settings;
+
+ // We can't use the following code in IE6
+ // var form = document.createElement('form');
+ // form.setAttribute('method', 'post');
+ // form.setAttribute('enctype', 'multipart/form-data');
+ // Because in this case file won't be attached to request
+ var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
+
+ form.setAttribute('action', settings.action);
+ form.setAttribute('target', iframe.name);
+ form.style.display = 'none';
+ document.body.appendChild(form);
+
+ // Create hidden input element for each data key
+ for (var prop in settings.data) {
+ if (settings.data.hasOwnProperty(prop)){
+ var el = document.createElement("input");
+ el.setAttribute('type', 'hidden');
+ el.setAttribute('name', prop);
+ el.setAttribute('value', settings.data[prop]);
+ form.appendChild(el);
+ }
+ }
+ return form;
+ },
+ /**
+ * Gets response from iframe and fires onComplete event when ready
+ * @param iframe
+ * @param file Filename to use in onComplete callback
+ */
+ _getResponse : function(iframe, file){
+ // getting response
+ var toDeleteFlag = false, self = this, settings = this._settings;
+
+ addEvent(iframe, 'load', function(){
+
+ if (// For Safari
+ iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
+ // For FF, IE
+ iframe.src == "javascript:'<html></html>';"){
+ // First time around, do not delete.
+ // We reload to blank page, so that reloading main page
+ // does not re-submit the post.
+
+ if (toDeleteFlag) {
+ // Fix busy state in FF3
+ setTimeout(function(){
+ removeNode(iframe);
+ }, 0);
+ }
+
+ return;
+ }
+
+ var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;
+
+ // fixing Opera 9.26,10.00
+ if (doc.readyState && doc.readyState != 'complete') {
+ // Opera fires load event multiple times
+ // Even when the DOM is not ready yet
+ // this fix should not affect other browsers
+ return;
+ }
+
+ // fixing Opera 9.64
+ if (doc.body && doc.body.innerHTML == "false") {
+ // In Opera 9.64 event was fired second time
+ // when body.innerHTML changed from false
+ // to server response approx. after 1 sec
+ return;
+ }
+
+ var response;
+
+ if (doc.XMLDocument) {
+ // response is a xml document Internet Explorer property
+ response = doc.XMLDocument;
+ } else if (doc.body){
+ // response is html document or plain text
+ response = doc.body.innerHTML;
+
+ if (settings.responseType && settings.responseType.toLowerCase() == 'json') {
+ // If the document was sent as 'application/javascript' or
+ // 'text/javascript', then the browser wraps the text in a <pre>
+ // tag and performs html encoding on the contents. In this case,
+ // we need to pull the original text content from the text node's
+ // nodeValue property to retrieve the unmangled content.
+ // Note that IE6 only understands text/html
+ if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE') {
+ response = doc.body.firstChild.firstChild.nodeValue;
+ }
+
+ if (response) {
+ response = eval("(" + response + ")");
+ } else {
+ response = {};
+ }
+ }
+ } else {
+ // response is a xml document
+ response = doc;
+ }
+
+ settings.onComplete.call(self, file, response);
+
+ // Reload blank page, so that reloading main page
+ // does not re-submit the post. Also, remember to
+ // delete the frame
+ toDeleteFlag = true;
+
+ // Fix IE mixed content issue
+ iframe.src = "javascript:'<html></html>';";
+ });
+ },
+ /**
+ * Upload file contained in this._input
+ */
+ submit: function(){
+ var self = this, settings = this._settings;
+
+ if ( ! this._input || this._input.value === ''){
+ return;
+ }
+
+ var file = fileFromPath(this._input.value);
+
+ // user returned false to cancel upload
+ if (false === settings.onSubmit.call(this, file, getExt(file))){
+ this._clearInput();
+ return;
+ }
+
+ // sending request
+ var iframe = this._createIframe();
+ var form = this._createForm(iframe);
+
+ // assuming following structure
+ // div -> input type='file'
+ removeNode(this._input.parentNode);
+ removeClass(self._button, self._settings.hoverClass);
+
+ form.appendChild(this._input);
+
+ form.submit();
+
+ // request set, clean up
+ removeNode(form); form = null;
+ removeNode(this._input); this._input = null;
+
+ // Get response from iframe and fire onComplete event when ready
+ this._getResponse(iframe, file);
+
+ // get ready for next request
+ this._createInput();
+ }
+ };
+})();
diff --git a/static/js/jquery.form.js b/static/js/jquery.form.js
new file mode 100755
index 0000000..dde3942
--- /dev/null
+++ b/static/js/jquery.form.js
@@ -0,0 +1,660 @@
+/*
+ * jQuery Form Plugin
+ * version: 2.36 (07-NOV-2009)
+ * @requires jQuery v1.2.6 or later
+ *
+ * Examples and documentation at: http://malsup.com/jquery/form/
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ */
+;(function($) {
+
+/*
+ Usage Note:
+ -----------
+ Do not use both ajaxSubmit and ajaxForm on the same form. These
+ functions are intended to be exclusive. Use ajaxSubmit if you want
+ to bind your own submit handler to the form. For example,
+
+ $(document).ready(function() {
+ $('#myForm').bind('submit', function() {
+ $(this).ajaxSubmit({
+ target: '#output'
+ });
+ return false; // <-- important!
+ });
+ });
+
+ Use ajaxForm when you want the plugin to manage all the event binding
+ for you. For example,
+
+ $(document).ready(function() {
+ $('#myForm').ajaxForm({
+ target: '#output'
+ });
+ });
+
+ When using ajaxForm, the ajaxSubmit function will be invoked for you
+ at the appropriate time.
+*/
+
+/**
+ * ajaxSubmit() provides a mechanism for immediately submitting
+ * an HTML form using AJAX.
+ */
+$.fn.ajaxSubmit = function(options) {
+ // fast fail if nothing selected (http://dev.jquery.com/ticket/2752)
+ if (!this.length) {
+ log('ajaxSubmit: skipping submit process - no element selected');
+ return this;
+ }
+
+ if (typeof options == 'function')
+ options = { success: options };
+
+ var url = $.trim(this.attr('action'));
+ if (url) {
+ // clean url (don't include hash vaue)
+ url = (url.match(/^([^#]+)/)||[])[1];
+ }
+ url = url || window.location.href || '';
+
+ options = $.extend({
+ url: url,
+ type: this.attr('method') || 'GET',
+ iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'
+ }, options || {});
+
+ // hook for manipulating the form data before it is extracted;
+ // convenient for use with rich editors like tinyMCE or FCKEditor
+ var veto = {};
+ this.trigger('form-pre-serialize', [this, options, veto]);
+ if (veto.veto) {
+ log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
+ return this;
+ }
+
+ // provide opportunity to alter form data before it is serialized
+ if (options.beforeSerialize && options.beforeSerialize(this, options) === false) {
+ log('ajaxSubmit: submit aborted via beforeSerialize callback');
+ return this;
+ }
+
+ var a = this.formToArray(options.semantic);
+ if (options.data) {
+ options.extraData = options.data;
+ for (var n in options.data) {
+ if(options.data[n] instanceof Array) {
+ for (var k in options.data[n])
+ a.push( { name: n, value: options.data[n][k] } );
+ }
+ else
+ a.push( { name: n, value: options.data[n] } );
+ }
+ }
+
+ // give pre-submit callback an opportunity to abort the submit
+ if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) {
+ log('ajaxSubmit: submit aborted via beforeSubmit callback');
+ return this;
+ }
+
+ // fire vetoable 'validate' event
+ this.trigger('form-submit-validate', [a, this, options, veto]);
+ if (veto.veto) {
+ log('ajaxSubmit: submit vetoed via form-submit-validate trigger');
+ return this;
+ }
+
+ var q = $.param(a);
+
+ if (options.type.toUpperCase() == 'GET') {
+ options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q;
+ options.data = null; // data is null for 'get'
+ }
+ else
+ options.data = q; // data is the query string for 'post'
+
+ var $form = this, callbacks = [];
+ if (options.resetForm) callbacks.push(function() { $form.resetForm(); });
+ if (options.clearForm) callbacks.push(function() { $form.clearForm(); });
+
+ // perform a load on the target only if dataType is not provided
+ if (!options.dataType && options.target) {
+ var oldSuccess = options.success || function(){};
+ callbacks.push(function(data) {
+ $(options.target).html(data).each(oldSuccess, arguments);
+ });
+ }
+ else if (options.success)
+ callbacks.push(options.success);
+
+ options.success = function(data, status) {
+ for (var i=0, max=callbacks.length; i < max; i++)
+ callbacks[i].apply(options, [data, status, $form]);
+ };
+
+ // are there files to upload?
+ var files = $('input:file', this).fieldValue();
+ var found = false;
+ for (var j=0; j < files.length; j++)
+ if (files[j])
+ found = true;
+
+ var multipart = false;
+// var mp = 'multipart/form-data';
+// multipart = ($form.attr('enctype') == mp || $form.attr('encoding') == mp);
+
+ // options.iframe allows user to force iframe mode
+ // 06-NOV-09: now defaulting to iframe mode if file input is detected
+ if ((files.length && options.iframe !== false) || options.iframe || found || multipart) {
+ // hack to fix Safari hang (thanks to Tim Molendijk for this)
+ // see: http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d
+ if (options.closeKeepAlive)
+ $.get(options.closeKeepAlive, fileUpload);
+ else
+ fileUpload();
+ }
+ else
+ $.ajax(options);
+
+ // fire 'notify' event
+ this.trigger('form-submit-notify', [this, options]);
+ return this;
+
+
+ // private function for handling file uploads (hat tip to YAHOO!)
+ function fileUpload() {
+ var form = $form[0];
+
+ if ($(':input[name=submit]', form).length) {
+ alert('Error: Form elements must not be named "submit".');
+ return;
+ }
+
+ var opts = $.extend({}, $.ajaxSettings, options);
+ var s = $.extend(true, {}, $.extend(true, {}, $.ajaxSettings), opts);
+
+ var id = 'jqFormIO' + (new Date().getTime());
+ var $io = $('<iframe id="' + id + '" name="' + id + '" src="'+ opts.iframeSrc +'" />');
+ var io = $io[0];
+
+ $io.css({ position: 'absolute', top: '-1000px', left: '-1000px' });
+
+ var xhr = { // mock object
+ aborted: 0,
+ responseText: null,
+ responseXML: null,
+ status: 0,
+ statusText: 'n/a',
+ getAllResponseHeaders: function() {},
+ getResponseHeader: function() {},
+ setRequestHeader: function() {},
+ abort: function() {
+ this.aborted = 1;
+ $io.attr('src', opts.iframeSrc); // abort op in progress
+ }
+ };
+
+ var g = opts.global;
+ // trigger ajax global events so that activity/block indicators work like normal
+ if (g && ! $.active++) $.event.trigger("ajaxStart");
+ if (g) $.event.trigger("ajaxSend", [xhr, opts]);
+
+ if (s.beforeSend && s.beforeSend(xhr, s) === false) {
+ s.global && $.active--;
+ return;
+ }
+ if (xhr.aborted)
+ return;
+
+ var cbInvoked = 0;
+ var timedOut = 0;
+
+ // add submitting element to data if we know it
+ var sub = form.clk;
+ if (sub) {
+ var n = sub.name;
+ if (n && !sub.disabled) {
+ options.extraData = options.extraData || {};
+ options.extraData[n] = sub.value;
+ if (sub.type == "image") {
+ options.extraData[name+'.x'] = form.clk_x;
+ options.extraData[name+'.y'] = form.clk_y;
+ }
+ }
+ }
+
+ // take a breath so that pending repaints get some cpu time before the upload starts
+ setTimeout(function() {
+ // make sure form attrs are set
+ var t = $form.attr('target'), a = $form.attr('action');
+
+ // update form attrs in IE friendly way
+ form.setAttribute('target',id);
+ if (form.getAttribute('method') != 'POST')
+ form.setAttribute('method', 'POST');
+ if (form.getAttribute('action') != opts.url)
+ form.setAttribute('action', opts.url);
+
+ // ie borks in some cases when setting encoding
+ if (! options.skipEncodingOverride) {
+ $form.attr({
+ encoding: 'multipart/form-data',
+ enctype: 'multipart/form-data'
+ });
+ }
+
+ // support timout
+ if (opts.timeout)
+ setTimeout(function() { timedOut = true; cb(); }, opts.timeout);
+
+ // add "extra" data to form if provided in options
+ var extraInputs = [];
+ try {
+ if (options.extraData)
+ for (var n in options.extraData)
+ extraInputs.push(
+ $('<input type="hidden" name="'+n+'" value="'+options.extraData[n]+'" />')
+ .appendTo(form)[0]);
+
+ // add iframe to doc and submit the form
+ $io.appendTo('body');
+ io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false);
+ form.submit();
+ }
+ finally {
+ // reset attrs and remove "extra" input elements
+ form.setAttribute('action',a);
+ t ? form.setAttribute('target', t) : $form.removeAttr('target');
+ $(extraInputs).remove();
+ }
+ }, 10);
+
+ var domCheckCount = 50;
+
+ function cb() {
+ if (cbInvoked++) return;
+
+ io.detachEvent ? io.detachEvent('onload', cb) : io.removeEventListener('load', cb, false);
+
+ var ok = true;
+ try {
+ if (timedOut) throw 'timeout';
+ // extract the server response from the iframe
+ var data, doc;
+
+ doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;
+
+ var isXml = opts.dataType == 'xml' || doc.XMLDocument || $.isXMLDoc(doc);
+ log('isXml='+isXml);
+ if (!isXml && (doc.body == null || doc.body.innerHTML == '')) {
+ if (--domCheckCount) {
+ // in some browsers (Opera) the iframe DOM is not always traversable when
+ // the onload callback fires, so we loop a bit to accommodate
+ cbInvoked = 0;
+ setTimeout(cb, 100);
+ return;
+ }
+ log('Could not access iframe DOM after 50 tries.');
+ return;
+ }
+
+ xhr.responseText = doc.body ? doc.body.innerHTML : null;
+ xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
+ xhr.getResponseHeader = function(header){
+ var headers = {'content-type': opts.dataType};
+ return headers[header];
+ };
+
+ if (opts.dataType == 'json' || opts.dataType == 'script') {
+ // see if user embedded response in textarea
+ var ta = doc.getElementsByTagName('textarea')[0];
+ if (ta)
+ xhr.responseText = ta.value;
+ else {
+ // account for browsers injecting pre around json response
+ var pre = doc.getElementsByTagName('pre')[0];
+ if (pre)
+ xhr.responseText = pre.innerHTML;
+ }
+ }
+ else if (opts.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null) {
+ xhr.responseXML = toXml(xhr.responseText);
+ }
+ data = $.httpData(xhr, opts.dataType);
+ }
+ catch(e){
+ ok = false;
+ $.handleError(opts, xhr, 'error', e);
+ }
+
+ // ordering of these callbacks/triggers is odd, but that's how $.ajax does it
+ if (ok) {
+ opts.success(data, 'success');
+ if (g) $.event.trigger("ajaxSuccess", [xhr, opts]);
+ }
+ if (g) $.event.trigger("ajaxComplete", [xhr, opts]);
+ if (g && ! --$.active) $.event.trigger("ajaxStop");
+ if (opts.complete) opts.complete(xhr, ok ? 'success' : 'error');
+
+ // clean up
+ setTimeout(function() {
+ $io.remove();
+ xhr.responseXML = null;
+ }, 100);
+ };
+
+ function toXml(s, doc) {
+ if (window.ActiveXObject) {
+ doc = new ActiveXObject('Microsoft.XMLDOM');
+ doc.async = 'false';
+ doc.loadXML(s);
+ }
+ else
+ doc = (new DOMParser()).parseFromString(s, 'text/xml');
+ return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc : null;
+ };
+ };
+};
+
+/**
+ * ajaxForm() provides a mechanism for fully automating form submission.
+ *
+ * The advantages of using this method instead of ajaxSubmit() are:
+ *
+ * 1: This method will include coordinates for <input type="image" /> elements (if the element
+ * is used to submit the form).
+ * 2. This method will include the submit element's name/value data (for the element that was
+ * used to submit the form).
+ * 3. This method binds the submit() method to the form for you.
+ *
+ * The options argument for ajaxForm works exactly as it does for ajaxSubmit. ajaxForm merely
+ * passes the options argument along after properly binding events for submit elements and
+ * the form itself.
+ */
+$.fn.ajaxForm = function(options) {
+ return this.ajaxFormUnbind().bind('submit.form-plugin', function() {
+ $(this).ajaxSubmit(options);
+ return false;
+ }).bind('click.form-plugin', function(e) {
+ var target = e.target;
+ var $el = $(target);
+ if (!($el.is(":submit,input:image"))) {
+ // is this a child element of the submit el? (ex: a span within a button)
+ var t = $el.closest(':submit');
+ if (t.length == 0)
+ return;
+ target = t[0];
+ }
+ var form = this;
+ form.clk = target;
+ if (target.type == 'image') {
+ if (e.offsetX != undefined) {
+ form.clk_x = e.offsetX;
+ form.clk_y = e.offsetY;
+ } else if (typeof $.fn.offset == 'function') { // try to use dimensions plugin
+ var offset = $el.offset();
+ form.clk_x = e.pageX - offset.left;
+ form.clk_y = e.pageY - offset.top;
+ } else {
+ form.clk_x = e.pageX - target.offsetLeft;
+ form.clk_y = e.pageY - target.offsetTop;
+ }
+ }
+ // clear form vars
+ setTimeout(function() { form.clk = form.clk_x = form.clk_y = null; }, 100);
+ });
+};
+
+// ajaxFormUnbind unbinds the event handlers that were bound by ajaxForm
+$.fn.ajaxFormUnbind = function() {
+ return this.unbind('submit.form-plugin click.form-plugin');
+};
+
+/**
+ * formToArray() gathers form element data into an array of objects that can
+ * be passed to any of the following ajax functions: $.get, $.post, or load.
+ * Each object in the array has both a 'name' and 'value' property. An example of
+ * an array for a simple login form might be:
+ *
+ * [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
+ *
+ * It is this array that is passed to pre-submit callback functions provided to the
+ * ajaxSubmit() and ajaxForm() methods.
+ */
+$.fn.formToArray = function(semantic) {
+ var a = [];
+ if (this.length == 0) return a;
+
+ var form = this[0];
+ var els = semantic ? form.getElementsByTagName('*') : form.elements;
+ if (!els) return a;
+ for(var i=0, max=els.length; i < max; i++) {
+ var el = els[i];
+ var n = el.name;
+ if (!n) continue;
+
+ if (semantic && form.clk && el.type == "image") {
+ // handle image inputs on the fly when semantic == true
+ if(!el.disabled && form.clk == el) {
+ a.push({name: n, value: $(el).val()});
+ a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
+ }
+ continue;
+ }
+
+ var v = $.fieldValue(el, true);
+ if (v && v.constructor == Array) {
+ for(var j=0, jmax=v.length; j < jmax; j++)
+ a.push({name: n, value: v[j]});
+ }
+ else if (v !== null && typeof v != 'undefined')
+ a.push({name: n, value: v});
+ }
+
+ if (!semantic && form.clk) {
+ // input type=='image' are not found in elements array! handle it here
+ var $input = $(form.clk), input = $input[0], n = input.name;
+ if (n && !input.disabled && input.type == 'image') {
+ a.push({name: n, value: $input.val()});
+ a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
+ }
+ }
+ return a;
+};
+
+/**
+ * Serializes form data into a 'submittable' string. This method will return a string
+ * in the format: name1=value1&amp;name2=value2
+ */
+$.fn.formSerialize = function(semantic) {
+ //hand off to jQuery.param for proper encoding
+ return $.param(this.formToArray(semantic));
+};
+
+/**
+ * Serializes all field elements in the jQuery object into a query string.
+ * This method will return a string in the format: name1=value1&amp;name2=value2
+ */
+$.fn.fieldSerialize = function(successful) {
+ var a = [];
+ this.each(function() {
+ var n = this.name;
+ if (!n) return;
+ var v = $.fieldValue(this, successful);
+ if (v && v.constructor == Array) {
+ for (var i=0,max=v.length; i < max; i++)
+ a.push({name: n, value: v[i]});
+ }
+ else if (v !== null && typeof v != 'undefined')
+ a.push({name: this.name, value: v});
+ });
+ //hand off to jQuery.param for proper encoding
+ return $.param(a);
+};
+
+/**
+ * Returns the value(s) of the element in the matched set. For example, consider the following form:
+ *
+ * <form><fieldset>
+ * <input name="A" type="text" />
+ * <input name="A" type="text" />
+ * <input name="B" type="checkbox" value="B1" />
+ * <input name="B" type="checkbox" value="B2"/>
+ * <input name="C" type="radio" value="C1" />
+ * <input name="C" type="radio" value="C2" />
+ * </fieldset></form>
+ *
+ * var v = $(':text').fieldValue();
+ * // if no values are entered into the text inputs
+ * v == ['','']
+ * // if values entered into the text inputs are 'foo' and 'bar'
+ * v == ['foo','bar']
+ *
+ * var v = $(':checkbox').fieldValue();
+ * // if neither checkbox is checked
+ * v === undefined
+ * // if both checkboxes are checked
+ * v == ['B1', 'B2']
+ *
+ * var v = $(':radio').fieldValue();
+ * // if neither radio is checked
+ * v === undefined
+ * // if first radio is checked
+ * v == ['C1']
+ *
+ * The successful argument controls whether or not the field element must be 'successful'
+ * (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls).
+ * The default value of the successful argument is true. If this value is false the value(s)
+ * for each element is returned.
+ *
+ * Note: This method *always* returns an array. If no valid value can be determined the
+ * array will be empty, otherwise it will contain one or more values.
+ */
+$.fn.fieldValue = function(successful) {
+ for (var val=[], i=0, max=this.length; i < max; i++) {
+ var el = this[i];
+ var v = $.fieldValue(el, successful);
+ if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length))
+ continue;
+ v.constructor == Array ? $.merge(val, v) : val.push(v);
+ }
+ return val;
+};
+
+/**
+ * Returns the value of the field element.
+ */
+$.fieldValue = function(el, successful) {
+ var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
+ if (typeof successful == 'undefined') successful = true;
+
+ if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
+ (t == 'checkbox' || t == 'radio') && !el.checked ||
+ (t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
+ tag == 'select' && el.selectedIndex == -1))
+ return null;
+
+ if (tag == 'select') {
+ var index = el.selectedIndex;
+ if (index < 0) return null;
+ var a = [], ops = el.options;
+ var one = (t == 'select-one');
+ var max = (one ? index+1 : ops.length);
+ for(var i=(one ? index : 0); i < max; i++) {
+ var op = ops[i];
+ if (op.selected) {
+ var v = op.value;
+ if (!v) // extra pain for IE...
+ v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
+ if (one) return v;
+ a.push(v);
+ }
+ }
+ return a;
+ }
+ return el.value;
+};
+
+/**
+ * Clears the form data. Takes the following actions on the form's input fields:
+ * - input text fields will have their 'value' property set to the empty string
+ * - select elements will have their 'selectedIndex' property set to -1
+ * - checkbox and radio inputs will have their 'checked' property set to false
+ * - inputs of type submit, button, reset, and hidden will *not* be effected
+ * - button elements will *not* be effected
+ */
+$.fn.clearForm = function() {
+ return this.each(function() {
+ $('input,select,textarea', this).clearFields();
+ });
+};
+
+/**
+ * Clears the selected form elements.
+ */
+$.fn.clearFields = $.fn.clearInputs = function() {
+ return this.each(function() {
+ var t = this.type, tag = this.tagName.toLowerCase();
+ if (t == 'text' || t == 'password' || tag == 'textarea')
+ this.value = '';
+ else if (t == 'checkbox' || t == 'radio')
+ this.checked = false;
+ else if (tag == 'select')
+ this.selectedIndex = -1;
+ });
+};
+
+/**
+ * Resets the form data. Causes all form elements to be reset to their original value.
+ */
+$.fn.resetForm = function() {
+ return this.each(function() {
+ // guard against an input with the name of 'reset'
+ // note that IE reports the reset function as an 'object'
+ if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType))
+ this.reset();
+ });
+};
+
+/**
+ * Enables or disables any matching elements.
+ */
+$.fn.enable = function(b) {
+ if (b == undefined) b = true;
+ return this.each(function() {
+ this.disabled = !b;
+ });
+};
+
+/**
+ * Checks/unchecks any matching checkboxes or radio buttons and
+ * selects/deselects and matching option elements.
+ */
+$.fn.selected = function(select) {
+ if (select == undefined) select = true;
+ return this.each(function() {
+ var t = this.type;
+ if (t == 'checkbox' || t == 'radio')
+ this.checked = select;
+ else if (this.tagName.toLowerCase() == 'option') {
+ var $sel = $(this).parent('select');
+ if (select && $sel[0] && $sel[0].type == 'select-one') {
+ // deselect all other options
+ $sel.find('option').selected(false);
+ }
+ this.selected = select;
+ }
+ });
+};
+
+// helper fn for console logging
+// set $.fn.ajaxSubmit.debug to true to enable debug logging
+function log() {
+ if ($.fn.ajaxSubmit.debug && window.console && window.console.log)
+ window.console.log('[jquery.form] ' + Array.prototype.join.call(arguments,''));
+};
+
+})(jQuery);