Created
September 19, 2012 04:51
-
-
Save adrian-enspired/3747742 to your computer and use it in GitHub Desktop.
a jQuery (v1.8.1) plugin which uses data-* attributes to unobtrusively trigger ajax calls.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @package javascriptApp | |
* @author Adrian Testa-Avila <[email protected]> | |
* @copyright 2012 Adrian Testa-Avila | |
* @license Creative Commons Attribution-ShareAlike 3.0 Unported | |
* <http://creativecommons.org/licenses/by-sa/3.0/> | |
*/ | |
/** | |
* jQuery plugin: AT.autoXHR | |
* uses HTML5 data-* attributes to inobtrusively trigger ajax calls. | |
* @uses jQuery version 1.8 <http://jquery.com> | |
*/ | |
(function( $ ){ | |
$.fn.autoXHR = function( userOptions ){ | |
console.log('autoXHR: setting event listeners'); | |
var options = { | |
data_autoXHR: 'data-autoxhr' | |
,data_XHRinto: 'data-xhrinto' | |
,triggerEvent: 'click' | |
}; | |
if( userOptions ){ $.extend( options,userOptions ); } | |
return this.each( function(){ | |
var listener = this; | |
$( this ).on( | |
options.triggerEvent | |
,'['+options.data_autoXHR+']' | |
,function( event ){ | |
console.log('autoXHR: triggered'); | |
event.preventDefault(); | |
var triggerData = (function( t ){ | |
var d = t.attr( options.data_autoXHR ); | |
try{ d = JSON.parse( d ); }catch(e){ /* no error, just not JSON */ } | |
var tD = { args:'',complete:'',resource:'',success:'',target:'' }; | |
if( typeof d === 'object' ){ $.extend( tD,d ); } | |
else if( typeof d === 'string' ){ tD.resource = d; } | |
// set resource | |
if( !tD.resource || /^#/.test( tD.resource ) ){ | |
h = t.attr( 'href' ) || ''; | |
tD.resource = h + tD.resource; | |
if( !tD.resource ){ | |
console.log('autoXHR: trigger specifies no resource'); | |
return false; | |
} | |
} | |
// set container | |
if( tD.target == '' ){ | |
tD.target = t.closest( '[' +options.data_XHRinto+ ']' ); | |
if( !tD.target || !tD.target.length ){ | |
tD.target = listener.children( '[' +options.data_XHRinto+ ']' ); | |
if( !tD.target || !tD.target.length ){ | |
tD.target = $( listener ); | |
} | |
} | |
}else{ tD.target = $( tD.target ); } | |
if( !tD.target || !tD.target.length ){ | |
console.log('autoXHR: target container invalid or not specified'); | |
return false; | |
} | |
// set success handler | |
switch( tD.success ){ | |
case 'html': | |
default: | |
tD.success = function( response ){ | |
tD.target.html( response ); | |
console.log('autoXHR: successful'); | |
event.preventDefault(); | |
} | |
break; | |
} | |
return tD; | |
})( $( event.target ) ) | |
$.ajax({ | |
'data' : triggerData.args | |
,'global' : false | |
,'success' : triggerData.success | |
,'url' : triggerData.resource | |
}); | |
} | |
); | |
console.log('autoXHR: ' +options.triggerEvent+ ' listener set'); | |
}); | |
} | |
})( jQuery ); |
This has actually been updated and put in my front-end repo at https://github.com/customanything/front-end-lib/blob/master/jQuery/autoXHR.0.2.js
I'm interested in it again - got some feedback; I'll be rewriting it a bit; breaking some procedural stuff off into functions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
rewritten. documentation forthcoming.