4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.UpdateManager
15 * @extends Roo.util.Observable
16 * Provides AJAX-style update for Element object.<br><br>
19 * // Get it from a Roo.Element object
20 * var el = Roo.get("foo");
21 * var mgr = el.getUpdateManager();
22 * mgr.update("http://myserver.com/index.php", "param1=1&param2=2");
24 * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
26 * // or directly (returns the same UpdateManager instance)
27 * var mgr = new Roo.UpdateManager("myElementId");
28 * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
29 * mgr.on("update", myFcnNeedsToKnow);
31 // short handed call directly from the element object
36 text: "Loading Foo..."
40 * Create new UpdateManager directly.
41 * @param {String/HTMLElement/Roo.Element} el The element to update
42 * @param {Boolean} forceNew (optional) By default the constructor checks to see if the passed element already has an UpdateManager and if it does it returns the same instance. This will skip that check (useful for extending this class).
44 Roo.UpdateManager = function(el, forceNew){
46 if(!forceNew && el.updateManager){
47 return el.updateManager;
55 * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
58 this.defaultUrl = null;
63 * Fired before an update is made, return false from your handler and the update is cancelled.
64 * @param {Roo.Element} el
65 * @param {String/Object/Function} url
66 * @param {String/Object} params
71 * Fired after successful update is made.
72 * @param {Roo.Element} el
73 * @param {Object} oResponseObject The response Object
78 * Fired on update failure.
79 * @param {Roo.Element} el
80 * @param {Object} oResponseObject The response Object
84 var d = Roo.UpdateManager.defaults;
86 * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
89 this.sslBlankUrl = d.sslBlankUrl;
91 * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
94 this.disableCaching = d.disableCaching;
96 * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '<div class="loading-indicator">Loading...</div>').
99 this.indicatorText = d.indicatorText;
101 * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
104 this.showLoadIndicator = d.showLoadIndicator;
106 * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
109 this.timeout = d.timeout;
112 * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
115 this.loadScripts = d.loadScripts;
118 * Transaction object of current executing transaction
120 this.transaction = null;
125 this.autoRefreshProcId = null;
127 * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
130 this.refreshDelegate = this.refresh.createDelegate(this);
132 * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
135 this.updateDelegate = this.update.createDelegate(this);
137 * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
140 this.formUpdateDelegate = this.formUpdate.createDelegate(this);
144 this.successDelegate = this.processSuccess.createDelegate(this);
148 this.failureDelegate = this.processFailure.createDelegate(this);
152 * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
154 this.renderer = new Roo.UpdateManager.BasicRenderer();
157 Roo.UpdateManager.superclass.constructor.call(this);
160 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
162 * Get the Element this UpdateManager is bound to
163 * @return {Roo.Element} The element
169 * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
170 * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
173 url: "your-url.php",<br/>
174 params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
175 callback: yourFunction,<br/>
176 scope: yourObject, //(optional scope) <br/>
177 discardUrl: false, <br/>
179 text: "Loading...",<br/>
184 * The only required property is url. The optional properties nocache, text and scripts
185 * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
186 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
187 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
188 * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
190 update : function(url, params, callback, discardUrl){
191 if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
192 var method = this.method,
194 if(typeof url == "object"){ // must be config object
197 params = params || cfg.params;
198 callback = callback || cfg.callback;
199 discardUrl = discardUrl || cfg.discardUrl;
200 if(callback && cfg.scope){
201 callback = callback.createDelegate(cfg.scope);
203 if(typeof cfg.method != "undefined"){method = cfg.method;};
204 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
205 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
206 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
207 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
211 this.defaultUrl = url;
213 if(typeof url == "function"){
214 url = url.call(this);
217 method = method || (params ? "POST" : "GET");
219 url = this.prepareUrl(url);
222 var o = Roo.apply(cfg ||{}, {
225 success: this.successDelegate,
226 failure: this.failureDelegate,
228 timeout: (this.timeout*1000),
229 argument: {"url": url, "form": null, "callback": callback, "params": params}
231 Roo.log("updated manager called with timeout of " + o.timeout);
232 this.transaction = Roo.Ajax.request(o);
237 * Performs an async form post, updating this element with the response. If the form has the attribute enctype="multipart/form-data", it assumes it's a file upload.
238 * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
239 * @param {String/HTMLElement} form The form Id or form element
240 * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
241 * @param {Boolean} reset (optional) Whether to try to reset the form after the update
242 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
244 formUpdate : function(form, url, reset, callback){
245 if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
246 if(typeof url == "function"){
247 url = url.call(this);
249 form = Roo.getDom(form);
250 this.transaction = Roo.Ajax.request({
253 success: this.successDelegate,
254 failure: this.failureDelegate,
255 timeout: (this.timeout*1000),
256 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
258 this.showLoading.defer(1, this);
263 * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
264 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
266 refresh : function(callback){
267 if(this.defaultUrl == null){
270 this.update(this.defaultUrl, null, callback, true);
274 * Set this element to auto refresh.
275 * @param {Number} interval How often to update (in seconds).
276 * @param {String/Function} url (optional) The url for this request or a function to call to get the url (Defaults to the last used url)
277 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
278 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
279 * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
281 startAutoRefresh : function(interval, url, params, callback, refreshNow){
283 this.update(url || this.defaultUrl, params, callback, true);
285 if(this.autoRefreshProcId){
286 clearInterval(this.autoRefreshProcId);
288 this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
292 * Stop auto refresh on this element.
294 stopAutoRefresh : function(){
295 if(this.autoRefreshProcId){
296 clearInterval(this.autoRefreshProcId);
297 delete this.autoRefreshProcId;
301 isAutoRefreshing : function(){
302 return this.autoRefreshProcId ? true : false;
305 * Called to update the element to "Loading" state. Override to perform custom action.
307 showLoading : function(){
308 if(this.showLoadIndicator){
309 this.el.update(this.indicatorText);
314 * Adds unique parameter to query string if disableCaching = true
317 prepareUrl : function(url){
318 if(this.disableCaching){
319 var append = "_dc=" + (new Date().getTime());
320 if(url.indexOf("?") !== -1){
332 processSuccess : function(response){
333 this.transaction = null;
334 if(response.argument.form && response.argument.reset){
335 try{ // put in try/catch since some older FF releases had problems with this
336 response.argument.form.reset();
339 if(this.loadScripts){
340 this.renderer.render(this.el, response, this,
341 this.updateComplete.createDelegate(this, [response]));
343 this.renderer.render(this.el, response, this);
344 this.updateComplete(response);
348 updateComplete : function(response){
349 this.fireEvent("update", this.el, response);
350 if(typeof response.argument.callback == "function"){
351 response.argument.callback(this.el, true, response);
358 processFailure : function(response){
359 this.transaction = null;
360 this.fireEvent("failure", this.el, response);
361 if(typeof response.argument.callback == "function"){
362 response.argument.callback(this.el, false, response);
367 * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
368 * @param {Object} renderer The object implementing the render() method
370 setRenderer : function(renderer){
371 this.renderer = renderer;
374 getRenderer : function(){
375 return this.renderer;
379 * Set the defaultUrl used for updates
380 * @param {String/Function} defaultUrl The url or a function to call to get the url
382 setDefaultUrl : function(defaultUrl){
383 this.defaultUrl = defaultUrl;
387 * Aborts the executing transaction
390 if(this.transaction){
391 Roo.Ajax.abort(this.transaction);
396 * Returns true if an update is in progress
399 isUpdating : function(){
400 if(this.transaction){
401 return Roo.Ajax.isLoading(this.transaction);
408 * @class Roo.UpdateManager.defaults
409 * @static (not really - but it helps the doc tool)
410 * The defaults collection enables customizing the default properties of UpdateManager
412 Roo.UpdateManager.defaults = {
414 * Timeout for requests or form posts in seconds (Defaults 30 seconds).
420 * True to process scripts by default (Defaults to false).
426 * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
429 sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
431 * Whether to append unique parameter on get request to disable caching (Defaults to false).
434 disableCaching : false,
436 * Whether to show indicatorText when loading (Defaults to true).
439 showLoadIndicator : true,
441 * Text for loading indicator (Defaults to '<div class="loading-indicator">Loading...</div>').
444 indicatorText : '<div class="loading-indicator">Loading...</div>'
448 * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
450 * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
451 * @param {String/HTMLElement/Roo.Element} el The element to update
452 * @param {String} url The url
453 * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
454 * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
457 * @member Roo.UpdateManager
459 Roo.UpdateManager.updateElement = function(el, url, params, options){
460 var um = Roo.get(el, true).getUpdateManager();
461 Roo.apply(um, options);
462 um.update(url, params, options ? options.callback : null);
464 // alias for backwards compat
465 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
467 * @class Roo.UpdateManager.BasicRenderer
468 * Default Content renderer. Updates the elements innerHTML with the responseText.
470 Roo.UpdateManager.BasicRenderer = function(){};
472 Roo.UpdateManager.BasicRenderer.prototype = {
474 * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
475 * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
476 * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
477 * @param {Roo.Element} el The element being rendered
478 * @param {Object} response The YUI Connect response object
479 * @param {UpdateManager} updateManager The calling update manager
480 * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
482 render : function(el, response, updateManager, callback){
483 el.update(response.responseText, updateManager.loadScripts, callback);