From f9b4a564de341bc8a0f3068e0156e247e53172ef Mon Sep 17 00:00:00 2001 From: Aaron Newton Date: Thu, 15 Aug 2013 16:04:04 -0700 Subject: [PATCH] Adding the ability to encode content into an Ajax request as well as the ability to throttle an Ajax Delegator. --- Docs/Delegators/Delegator.Ajax.md | 2 + Source/Delegators/Delegator.Ajax.js | 62 +++++++++++++++++++++++------ 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/Docs/Delegators/Delegator.Ajax.md b/Docs/Delegators/Delegator.Ajax.md index 7bc80d7..bad0ead 100644 --- a/Docs/Delegators/Delegator.Ajax.md +++ b/Docs/Delegators/Delegator.Ajax.md @@ -24,6 +24,8 @@ The above example will load the response from the links HREF (`get/list/item.php * method - (*string*; optional) - the HTML verb to use; defaults to `get`. * filter - (*string*; optional) - a selector to run against the response whose response will be used to update the DOM instead of the full response. * loadOnce - (*boolean*; optional) - if `true`, the link will only load content into its target once. Subsequent clicks are ignored (a console warning is displayed). +* throttle - (*number*; optional) - delays the ajax request and kills it if a subsequent request is made within this time frame (in ms). Defaults to 0 (i.e. no throttle). +* encode - (*string*; optional) - the selector to find an element to URL encode with the request at the time of invocation. Specify a selector to an input and only that input is sent. Any other DOM element encodes all of its children to send. Allows for the special selector "self" which encodes the element with the trigger on it. ### Actions diff --git a/Source/Delegators/Delegator.Ajax.js b/Source/Delegators/Delegator.Ajax.js index 8ef9c1f..5596a48 100644 --- a/Source/Delegators/Delegator.Ajax.js +++ b/Source/Delegators/Delegator.Ajax.js @@ -7,14 +7,8 @@ script: Delegator.Ajax.js name: Delegator.Ajax ... */ - -Delegator.register('click', 'Ajax', { - require: ['target'], - defaults: { - action: 'injectBottom', - method: 'get' - }, - handler: function(event, link, api){ +(function(){ + var send = function(event, link, api){ if (api.getAs(Boolean, 'loadOnce') === true && link.retrieve('ajaxLoaded')){ api.warn('already loaded link via ajax. `once` option is true, so exiting quietly.'); return; @@ -38,7 +32,8 @@ Delegator.register('click', 'Ajax', { if (spinnerTarget) spinnerTarget = link.getElement(spinnerTarget); event.preventDefault(); - new Request.HTML( + + var request = new Request.HTML( Object.cleanValues({ method: api.get('method'), evalScripts: api.get('evalScripts'), @@ -76,7 +71,50 @@ Delegator.register('click', 'Ajax', { } } }) - ).send(); + ); + // allow for additional data to be encoded into the request at the time of invocation + var data; + // if the encode option is set + if (api.get('encode')){ + // go get the element to encode; allow 'self' or a selector + var encode = api.get('encode') == 'self' ? link : link.getElement(api.get('encode')); + // if one was found, encode it! + if (encode){ + data = {}; + // if the reference is a single input, just capture its value + if (encode.get('tag') == 'input') data[encode.get('name')] = encode.get('value'); + // else encode the element's children as a query string + else data = encode.toQueryString(); + } else { + api.warn("Warning: Ajax delegator could not find encode target " + api.get('encode')); + } + } + if (data) request.send({data: data}); + else request.send(); link.store('ajaxLoaded', true); - } -}); \ No newline at end of file + }; + + Delegator.register('click', 'Ajax', { + require: ['target'], + defaults: { + action: 'injectBottom', + method: 'get', + throttle: 0 //prevents sending repeatedly within this threshold + }, + handler: function(event, link, api){ + // if the throttle is set and != 0 + if (api.get('throttle')){ + // store the timer on the element for subsequent requests + var timer = link.retrieve('ajaxTimer'); + // clear the previous running timer if there is one + if (timer) clearTimeout(timer); + // store the new one; delaying the send call by the configured amount + link.store('ajaxTimer', send.delay(api.get('throttle'), this, arguments)); + } else { + // otherwise hey, no throttle. send it. + send.apply(this, arguments); + } + } + }); + +})();