|
@@ -23,32 +23,14 @@ script: CCS.JFrame.AjaxLoad.js
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
(function(){
|
|
(function(){
|
|
|
- //if we are loading a link via ajax, we either replace, append, or inject.
|
|
|
|
|
-
|
|
|
|
|
- var linkers = {};
|
|
|
|
|
-
|
|
|
|
|
- ['append', 'replace', 'target'].each(function(action){
|
|
|
|
|
- linkers['data-ajax-' + action] = function(event, link){
|
|
|
|
|
- var target = $(this).getElement(link.get('data', 'ajax-' + action));
|
|
|
|
|
- if (!target) {
|
|
|
|
|
- link.erase('data-ajax-' + action);
|
|
|
|
|
- dbug.log('could not ' + action + ' the target element with response; element matching selector %s was not found', link.get('data', 'ajax-' + action));
|
|
|
|
|
- this.callClick(event, link, true);
|
|
|
|
|
- }
|
|
|
|
|
- ajaxLoad.call(this, event, link, target, action);
|
|
|
|
|
- };
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- CCS.JFrame.addGlobalLinkers(linkers);
|
|
|
|
|
|
|
|
|
|
/*
|
|
/*
|
|
|
loads the contents of a link into a specific target
|
|
loads the contents of a link into a specific target
|
|
|
* event - the event object from the link click
|
|
* event - the event object from the link click
|
|
|
* link - the link clicked
|
|
* link - the link clicked
|
|
|
- * target - where to put the response
|
|
|
|
|
- * action - (string; optional) either 'append', 'replace', or 'update' (defaults to 'update')
|
|
|
|
|
|
|
|
|
|
notes:
|
|
notes:
|
|
|
|
|
+ * links have properties for one of data-ajax-append, data-ajax-replace, and data-ajax-target
|
|
|
* replace means destroy the target and replace it entirely with the response.
|
|
* replace means destroy the target and replace it entirely with the response.
|
|
|
* append means leave everything in place and inject the response after the target.
|
|
* append means leave everything in place and inject the response after the target.
|
|
|
* update means empty the target and fill it with the response
|
|
* update means empty the target and fill it with the response
|
|
@@ -58,56 +40,65 @@ script: CCS.JFrame.AjaxLoad.js
|
|
|
the body in the response.
|
|
the body in the response.
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
- var ajaxLoad = function(event, link, target, action){
|
|
|
|
|
|
|
+ var linkers = {};
|
|
|
|
|
|
|
|
- action = action || 'update';
|
|
|
|
|
- var requestTarget = target;
|
|
|
|
|
- if (action != 'update') requestTarget = new Element('div');
|
|
|
|
|
|
|
+ ['append', 'replace', 'target'].each(function(action){
|
|
|
|
|
|
|
|
|
|
+ linkers['data-ajax-' + action] = function(event, link){
|
|
|
|
|
+ var target = $(this).getElement(link.get('data', 'ajax-' + action));
|
|
|
|
|
+ if (!target) {
|
|
|
|
|
+ link.erase('data-ajax-' + action);
|
|
|
|
|
+ dbug.log('could not ' + action + ' the target element with response; element matching selector %s was not found', link.get('data', 'ajax-' + action));
|
|
|
|
|
+ this.callClick(event, link, true);
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- var options = {
|
|
|
|
|
- filter: link.get('data', 'ajax-filter'),
|
|
|
|
|
- requestPath: link.get('href'),
|
|
|
|
|
- spinnerTarget: requestTarget,
|
|
|
|
|
- target: requestTarget,
|
|
|
|
|
- ignorePartialRefresh: true,
|
|
|
|
|
- ignoreAutoRefresh: true,
|
|
|
|
|
- suppressLoadComplete: true,
|
|
|
|
|
- retainPath: true,
|
|
|
|
|
- callback: function(data){
|
|
|
|
|
- switch(action){
|
|
|
|
|
- case 'replace':
|
|
|
|
|
- //reverse the elements and inject them
|
|
|
|
|
- //reversal is required since it injects each after the target
|
|
|
|
|
- //pushing down the previously added element
|
|
|
|
|
- data.elements.reverse().injectAfter(target);
|
|
|
|
|
- target.destroy();
|
|
|
|
|
- break;
|
|
|
|
|
- case 'append':
|
|
|
|
|
- //see note above in 'replace' case as to why we use reverse here
|
|
|
|
|
- data.elements.reverse().injectAfter(target);
|
|
|
|
|
- break;
|
|
|
|
|
- //do nothing for update, as Request.HTML already does it for you
|
|
|
|
|
- }
|
|
|
|
|
- var state = {
|
|
|
|
|
- event: event,
|
|
|
|
|
- link: link,
|
|
|
|
|
- target: target,
|
|
|
|
|
- action: action
|
|
|
|
|
- };
|
|
|
|
|
- //pass along the data that came back from JFrame's response handler as well as the state of this ajax load.
|
|
|
|
|
- this.fireEvent('ajaxLoad', [data, state]);
|
|
|
|
|
- this.behavior.fireEvent('update', [data, state]);
|
|
|
|
|
- }.bind(this)
|
|
|
|
|
- };
|
|
|
|
|
- var spinnerTarget = link.get('data', 'spinner-target');
|
|
|
|
|
- if (spinnerTarget) {
|
|
|
|
|
- spinnerTarget = $(this).getElement(spinnerTarget);
|
|
|
|
|
- options.spinnerTarget = spinnerTarget;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ var requestTarget = target;
|
|
|
|
|
+ if (action != 'update') requestTarget = new Element('div');
|
|
|
|
|
|
|
|
- this.load(options);
|
|
|
|
|
|
|
+ var options = {
|
|
|
|
|
+ filter: link.get('data', 'ajax-filter'),
|
|
|
|
|
+ requestPath: link.get('href'),
|
|
|
|
|
+ spinnerTarget: requestTarget,
|
|
|
|
|
+ target: requestTarget,
|
|
|
|
|
+ ignorePartialRefresh: true,
|
|
|
|
|
+ ignoreAutoRefresh: true,
|
|
|
|
|
+ suppressLoadComplete: true,
|
|
|
|
|
+ retainPath: true,
|
|
|
|
|
+ callback: function(data){
|
|
|
|
|
+ switch(action){
|
|
|
|
|
+ case 'replace':
|
|
|
|
|
+ //reverse the elements and inject them
|
|
|
|
|
+ //reversal is required since it injects each after the target
|
|
|
|
|
+ //pushing down the previously added element
|
|
|
|
|
+ data.elements.reverse().injectAfter(target);
|
|
|
|
|
+ target.destroy();
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 'append':
|
|
|
|
|
+ //see note above in 'replace' case as to why we use reverse here
|
|
|
|
|
+ data.elements.reverse().injectAfter(target);
|
|
|
|
|
+ break;
|
|
|
|
|
+ //do nothing for update, as Request.HTML already does it for you
|
|
|
|
|
+ }
|
|
|
|
|
+ var state = {
|
|
|
|
|
+ event: event,
|
|
|
|
|
+ link: link,
|
|
|
|
|
+ target: target,
|
|
|
|
|
+ action: action
|
|
|
|
|
+ };
|
|
|
|
|
+ //pass along the data that came back from JFrame's response handler as well as the state of this ajax load.
|
|
|
|
|
+ this.fireEvent('ajaxLoad', [data, state]);
|
|
|
|
|
+ this.behavior.fireEvent('update', [data, state]);
|
|
|
|
|
+ }.bind(this)
|
|
|
|
|
+ };
|
|
|
|
|
+ var spinnerTarget = link.get('data', 'spinner-target');
|
|
|
|
|
+ if (spinnerTarget) {
|
|
|
|
|
+ spinnerTarget = $(this).getElement(spinnerTarget);
|
|
|
|
|
+ options.spinnerTarget = spinnerTarget;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ this.load(options);
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
})();
|
|
})();
|