b0a993cab58e98e8e66ac0b24ded148bf6a915a3
[jquery.git] / ajax / ajax.js
1 // AJAX Plugin
2 // Docs Here:
3 // http://jquery.com/docs/ajax/
4
5 if ( typeof XMLHttpRequest == 'undefined' && typeof window.ActiveXObject == 'function') {
6         XMLHttpRequest = function() {
7                 return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') >= 0) ?
8                         "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP");
9         };
10 }
11
12 // Counter for holding the active query's
13 $.xmlActive=0;
14
15 $.xml = function( type, url, data, ret ) {
16         if ( !url ) {
17                 ret = type.onComplete;
18                 var onSuccess = type.onSuccess;
19                 var onError = type.onError;
20                 data = type.data;
21                 url = type.url;
22                 type = type.type;
23         }
24
25         var xml = new XMLHttpRequest();
26
27         if ( xml ) {
28                 // Open the socket
29                 xml.open(type || "GET", url, true);
30                 if ( data )
31                         xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
32
33                 // Set header so calling script knows that it's an XMLHttpRequest
34                 xml.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
35
36                 /* Borrowed from Prototype:
37                  * Force "Connection: close" for Mozilla browsers to work around
38                  * a bug where XMLHttpReqeuest sends an incorrect Content-length
39                  * header. See Mozilla Bugzilla #246651.
40                  */
41                 if ( xml.overrideMimeType )
42                         xml.setRequestHeader('Connection', 'close');
43
44                 xml.onreadystatechange = function() {
45                         // Socket is openend
46                         if ( xml.readyState == 1 ) {
47                                 // Increase counter
48                                 $.xmlActive++;
49
50                                 // Show loader if needed
51                                 if ( ($.xmlActive >= 1) && ($.xmlCreate) )
52                                         $.xmlCreate();
53                         }
54
55                         // Socket is closed and data is available
56                         if ( xml.readyState == 4 ) {
57                                 // Decrease counter
58                                 $.xmlActive--;
59
60                                 // Hide loader if needed
61                                 if ( ($.xmlActive <= 0) && ($.xmlDestroy) ) {
62                                         $.xmlDestroy();
63                                         $.xmlActive = 0
64                                 }
65
66                                 if ( ( xml.status && ( xml.status >= 200 && xml.status < 300 ) || xml.status == 304 ) ||
67                                         !xml.status && location.protocol == 'file:' ) {
68                                         if ( onSuccess )
69                                                 onSuccess( xml );
70                                 } else if ( onError ) {
71                                         onError( xml );
72                                 }
73
74                                 // Process result
75                                 if ( ret )
76                                         ret(xml);
77                         }
78                 };
79
80                 xml.send(data)
81         }
82 };
83
84 $.httpData = function(r,type) {
85         return r.getResponseHeader("content-type").indexOf("xml") > 0 || type == "xml" ?
86                 r.responseXML : r.responseText;
87 };
88
89 $.get = function( url, ret, type ) {
90         $.xml( "GET", url, null, function(r) {
91                 if ( ret ) { ret( $.httpData(r,type) ); }
92         });
93 };
94
95 $.getXML = function( url, ret ) {
96         $.get( url, ret, "xml" );
97 };
98
99 $.post = function( url, data, ret, type ) {
100         $.xml( "POST", url, $.param(data), function(r) {
101                 if ( ret ) { ret( $.httpData(r,type) ); }
102         });
103 };
104
105 $.postXML = function( url, data, ret ) {
106         $.post( url, data, ret, "xml" );
107 };
108
109 $.param = function(a) {
110         var s = [];
111         if (a && typeof a == 'object' && a.constructor == Array) {
112                 for ( var i=0; i < a.length; i++ ) {
113                         s[s.length] = a[i].name + "=" + encodeURIComponent( a[i].value );
114                 }
115         } else {
116                 for ( var j in a ) {
117                         s[s.length] = j + "=" + encodeURIComponent( a[j] );
118                 }
119         }
120         return s.join("&");
121 };
122
123 $.fn.load = function(a,o,f) {
124         // Arrrrghhhhhhhh!!
125         // I overwrote the event plugin's .load
126         // this won't happen again, I hope -John
127         if ( a && a.constructor == Function ) {
128                 return this.bind("load", a);
129         }
130
131         var t = "GET";
132         if ( o && o.constructor == Function ) {
133                 f = o;
134                 o = null;
135         }
136         if (typeof o !== 'undefined') {
137                 o = $.param(o);
138                 t = "POST";
139         }
140         var self = this;
141         $.xml(t,a,o,function(res){
142                 // Assign it and execute all scripts
143                 self.html(res.responseText).find("script").each(function(){
144                         try { eval( this.text || this.textContent || this.innerHTML || ""); } catch(e){}
145                 });
146
147                 // Callback function
148                 if (f && f.constructor == Function)
149                         f(res.responseText);
150         });
151         return this;
152 };
153
154 /**
155  * Initial frontend function to submit form variables. This function
156  * is for registering coordinates, in the case of an image being used
157  * as the submit element, and sets up an event to listen and wait for
158  * a form submit click. It then calls any following chained functions
159  * to actually gather the variables and submit them.
160  *
161  * Usage examples, when used with getForm().putForm():
162  *
163  * 1. Just eval the results returned from the backend.
164  *    $('#form-id').form();
165  *
166  * 2. Render backend results directly to target ID (expects (x)HTML).
167  *    $('#form-id').form('#target-id');
168  *
169  * 3. Submit to backend URL (form action) then call this function.
170  *    $('#form-id').form(post_callback);
171  *
172  * 4. Load target ID with backend results then call a function.
173  *    $('#form-id').form('#target-id', null, post_callback);
174  *
175  * 5. Call a browser function (for validation) and then (optionally)
176  *    load server results to target ID.
177  *    $('#form-id').form('#target-id', pre_callback);
178  *
179  * 6. Call validation function first then load server results to
180  *    target ID and then also call a browser function.
181  *    $('#form-id').form('#target-id', pre_callback, post_callback);
182  *
183  * @param target   arg for the target id element to render
184  * @param pre_cb   callback function before submission
185  * @param post_cb  callback after any results are returned
186  * @return         "this" object
187  * @see            getForm(), putForm()
188  * @author         Mark Constable (markc@renta.net)
189  * @author         G. vd Hoven, Mike Alsup, Sam Collett
190  * @version        20060606
191  */
192 $.fn.form = function(target, pre_cb, post_cb) {
193         $('input[@type="submit"],input[@type="image"]', this).click(function(ev){
194                 this.form.clicked = this;
195                 if (ev.offsetX != undefined) {
196                         this.form.clicked_x = ev.offsetX;
197                         this.form.clicked_y = ev.offsetY;
198                 } else {
199                         this.form.clicked_x = ev.pageX - this.offsetLeft;
200                         this.form.clicked_y = ev.pageY - this.offsetTop;
201                 }
202         });
203         this.submit(function(e){
204                 e.preventDefault();
205                 $(this).getForm().putForm(target, pre_cb, post_cb);
206                 return this;
207   });
208 };
209
210 /**
211  * This function gathers form element variables into an array that
212  * is embedded into the current "this" variable as "this.vars". It
213  * is normally used in conjunction with form() and putForm() but can
214  * be used standalone as long as an image is not used for submission.
215  *
216  * Standalone usage examples:
217  *
218  * 1. Gather form vars and return array to LHS variable.
219  *    var myform = $('#form-id').getForm();
220  *
221  * 2. Provide a serialized URL-ready string (after 1. above).
222  *    var mystring = $.param(myform.vars);
223  *
224  * 3. Gather form vars and send to RHS plugin via "this.vars".
225  *    $('#form-id').getForm().some_other_plugin();
226  *
227  * @return         "this" object
228  * @see            form(), putForm()
229  * @author         Mark Constable (markc@renta.net)
230  * @author         G. vd Hoven, Mike Alsup, Sam Collett
231  * @version        20060606
232  */
233 $.fn.getForm = function() {
234   var a = [];
235   var ok = {INPUT:true, TEXTAREA:true, OPTION:true};
236   $('*', this).each(function() {
237     if (this.disabled || this.type == 'reset' || (this.type == 'checkbox' && !this.checked) || (this.type == 'radio' && !this.checked))
238         return;
239
240     if (this.type == 'submit' || this.type == 'image') {
241       if (this.form.clicked != this)
242         return;
243
244       if (this.type == 'image') {
245         if (this.form.clicked_x) {
246                                         a.push({name: this.name+'_x', value: this.form.clicked_x});
247                                         a.push({name: this.name+'_y', value: this.form.clicked_y});
248                                         return;
249                                 }
250                         }
251                 }
252
253                 if (!ok[this.nodeName.toUpperCase()])
254                         return;
255
256                 var par = this.parentNode;
257                 var p = par.nodeName.toUpperCase();
258                 if ((p == 'SELECT' || p == 'OPTGROUP') && !this.selected)
259                         return;
260
261                 var n = this.name || par.name;
262                 if (!n && p == 'OPTGROUP' && (par = par.parentNode))
263                         n = par.name;
264
265                 if (n == undefined)
266                         return;
267
268                 a.push({name: n, value: this.value});
269         });
270
271         this.vars = a;
272
273         return this;
274 }
275
276 /**
277  * Final form submission plugin usually used in conjunction with
278  * form() and getForm(). If a second argument is a valid function
279  * then it will be called before the form vars are sent to the
280  * backend. If this pre-submit function returns exactly "false"
281  * then it will abort further processing otherwise the process
282  * will continue according to the first and third arguments.
283  *
284  * If the first argument is a function, and it exists, then the form
285  * values will be submitted and that callback function called. If
286  * the first argument is a string value then the "load()" plugin
287  * will be called which will populate the innerHTML of the indicated
288  * element and a callback will be called if there is third argument.
289  * If there are no arguments then the form values are submitted with
290  * an additional variable (evaljs=1) which indicates to the backend
291  * to to prepare the returned results for evaluation, ie; the result
292  * needs to be valid javascript all on a single line.
293  *
294  * Usage example:
295  *
296  * $.fn.myvars = function() {
297  *   this.vars = [];
298  *   for (var i in this) {
299  *     if (this[i] instanceof Function || this[i] == null) continue;
300  *     this.vars.push({name: i, value: this[i].length});
301  *   }
302  *   return this;
303  * }
304  *
305  * precb = function(vars) {
306  *   return confirm('Submit these values?\n\n'+$.param(vars));
307  * }
308  *
309  * $('*').myvars().putForm('#mytarget',precb,null,'myhandler.php');
310  *
311  * @param target   arg for the target id element to render
312  * @param pre_cb   callback function before submission
313  * @param post_cb  callback after any results are returned
314  * @param url      form action override
315  * @param mth      form method override
316  * @return         "this" object
317  * @see            form(), getForm(), load(), xml()
318  * @author         Mark Constable (markc@renta.net)
319  * @author         G. vd Hoven, Mike Alsup, Sam Collett
320  * @version        20060606
321  */
322 $.fn.putForm = function(target, pre_cb, post_cb, url, mth) {
323         if (pre_cb && pre_cb.constructor == Function)
324                 if (pre_cb(this.vars) === false)
325                         return;
326
327         var f = this.get(0);
328         var url = url || f.action || '';
329         var mth = mth || f.method || 'POST';
330
331         if (target && target.constructor == Function) {
332                 $.xml(mth, url, $.param(this.vars), target);
333         } else if (target && target.constructor == String) {
334                 $(target).load(url, this.vars, post_cb);
335         } else {
336                 this.vars.push({name: 'evaljs', value: 1});
337                 $.xml(mth, url, $.param(this.vars), function(r) { eval(r.responseText); });
338         }
339
340         return this;
341 }