Skip to content

Instantly share code, notes, and snippets.

@adrian-enspired
Created September 19, 2012 04:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adrian-enspired/3747742 to your computer and use it in GitHub Desktop.
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.
/**
* @package javascriptApp
* @author Adrian Testa-Avila <AT@custom-anything.com>
* @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 );
@adrian-enspired
Copy link
Author

rewritten. documentation forthcoming.

@adrian-enspired
Copy link
Author

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