Neat. I'm better off with a link to a live demo. But I have one here. I discovered that:
tD.success = function( response ){
tD.target[successmethod]( response );
msg('autoXHR: successful (loaded resource <' +tD.resource+ '> to target ' +tD.target.selector+ ')' );
event.preventDefault();
}
return tD;
Throws an error in IE 8 and less unless we pass the event to getTriggerOpts. But since the event is already default prevented here:
return this.each( function(){
var listener = this;
$( this ).on( options.triggerEvent,'['+options.data_autoXHR+']',function( event ){
msg('autoXHR: triggered');
event.preventDefault();
// get settings for this call
var triggerOpts = getTrigg
It probably doesn't need to be in the success function, and if it were only in the success function, it would probably fire too late to do anything. Alternatively, if you wanted to fire the element normally on error, you could use the reference you have to it and fire it's href (if any and if it was an <a> tag) to its target (here I mean like _self, _parent, _blank, etc.) as part of the error function.
I also experimented with making the function that fires on the click a separate function and so far came up with (includes passing the event to getTriggerOpts, which as I say above probably could be completely dropped along with the second preventDefault):
/**
* @package front-end-lib
* @subpackage jQuery
* @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/>
* @version 0.2
*/
/**
* jQuery plugin: AT.autoXHR
* uses HTML5 data-* attributes to inobtrusively trigger ajax calls.
* @uses jQuery version 1.8 <http://jquery.com>
* @example demo package at <http://custom-anything.com/front-end-lib/autoXHR>
* @todo extended testing
*/
if(typeof console === 'undefined'){
window.console = {log: function(){}};
}
(function( $ ){
$.fn.autoXHR = function( userOptions ){
console.log('autoXHR: setting event listeners...');
var options = {
data_autoXHR: 'data-autoxhr'
,data_XHRinto: 'data-xhrinto'
,triggerEvent: 'click'
};
function getTriggerData(t, listener, event){
// base settings map
var tD = { args:'',complete:'',resource:'',success:'',target:'' };
// get autoXHR attribute value
var d = t.attr( options.data_autoXHR );
// is it JSON?
try{ d = JSON.parse( d ); }catch(e){ /* no error, just not JSON */ }
// a map means it contains settings;
// a string is assumed to be a URI for a resource to load
if( typeof d === 'object' ){ $.extend( tD,d ); }
else if( typeof d === 'string' ){ tD.resource = d; }
// set resource
// if resource is empty or a fragment, prepend trigger's href value
if( !tD.resource || /^#/.test( tD.resource ) ){
h = t.attr( 'href' ) || '';
tD.resource = h + tD.resource;
// no resource?
if( !tD.resource ){
console.log('autoXHR: trigger specifies no resource');
return false;
}
}
// set container
// if no target specified, look for:
// - first container _down_ DOM from listener element
// - listener element
if( !tD.target || !tD.target.length ){
tD.target = $( listener ).children( '[' +options.data_XHRinto+ ']' ).first();
if( !tD.target || !tD.target.length ){
tD.target = $( listener );
}
}else{ tD.target = $( tD.target ); }
// no 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 'append':
case 'prepend':
case 'html': var successmethod = tD.success; break;
default: var successmethod = 'html'; break;
}
tD.success = function( response ){
tD.target[successmethod]( response );
console.log('autoXHR: successful (loaded resource <' +tD.resource+ '> to target ' +tD.target.selector+ ')' );
event.preventDefault();
}
return tD;
}
function processEvent( event, listener ){
console.log('autoXHR: triggered');
event.preventDefault();
// get settings for this call
var triggerData = getTriggerData( $( this ), listener, event );
$.ajax({
'data' : triggerData.args
,'error' : function(x,e){ console.log('autoXHR: failed (' +x.status+ ': ' +x.statusText+ ')'); }
,'global' : false
,'success' : triggerData.success
,'url' : triggerData.resource
});
}
if( userOptions ){ $.extend( options, userOptions ); }
return this.each( function(){
var listener = this;
$( this ).on (
options.triggerEvent
,'['+options.data_autoXHR+']'
,function(event){processEvent.call(this, event, listener);}
);
console.log('autoXHR: ' +options.triggerEvent+ ' listener set on ' +listener.nodeName);
});
}
})( jQuery );
But because of the need to still have a function run the function, I'm not sure how beneficial that part (moving it out there as I have) is. Probably saves parsing it each time there's a click. A little oop might be good for that, but jQuery is already using this, so I'm not sure exactly how to oop it.