Andrea[{Cfm}]

For example purpose any example load the ajax result in a different div adjusting the target plugin option. Btw the target div is clean up before any code injection so that all the examples could have been pointed to the same target

Basic usage

Note the first link ( image 1 ) is intentionally broken to test the error response. Server response is delayed of 2 sec to see the loading message.

$('.ajax').ajaxContent();
HTML
<a class="ajax" href="examples/ajaxcontent/gallery.cfm?pi=image1">Image 1</a>
<a class="ajax" href="examples/ajaxcontent/gallery.cfm?pic=image2">Image 2</a>
<a class="ajax" href="examples/ajaxcontent/gallery.cfm?pic=image3">Image 3</a>

Image 1 Image 2 Image 3

Event is triggered on mouseover and load content from html files instead that from a dynamic template.

$('.ajax2').ajaxContent({
event:'mouseover',
target:'#ajaxContent2'
});
<a class="ajax2" href="examples/ajaxcontent/htmla.htm">Text 1</a>
<a class="ajax2" href="examples/ajaxcontent/htmlb.htm">Text 2</a>
<a class="ajax2" href="examples/ajaxcontent/htmlc.htm">Text 3</a>

Text 1 Text 2 Text 3

Change default loading message

loaderType is now IMG and loadingMsg supply the relative path to the img to display during the loading process.

$('.ajax3').ajaxContent({
loaderType:'img',
loadingMsg:'loading.gif',
target:'#ajaxContent3'
});
HTML AS first example

image 1 Image 2 Image 3

Highlight selected item.

By default the item that trigger the event receive the class "selected". The class can be changed and will affect only the set of items to which is referred. We use here a callback to demostrate that this set of items receive the customized class"current".

$('.ajax4').ajaxContent({
target:'#ajaxContent4',
currentClass:"current",
success: function(obj,target,msg){
alert($(obj).attr('class'));
}
});
HTML AS first example

Image 1 Image 2 Image 3

Callbacks and Error Message

The Error Message used by the plugIn can be personalized as follow.

The plugin provide 3 different callabcks that can be called from the options line.

"beforeSend" run before the ajax call starts and take 2 arguments

• obj : is the jQuery object that represet the item on which the event is triggered
• target : is the element to be filled by the ajax call

"success" run if the ajax call is completed and take 3 arguments

• obj : is the jQuery object that represet the item on which the event is triggered
• target : is the element to be filled by the ajax call
• msg : is the message received as response by the server

"error" run if the ajax call is broken and take un argument

• target : is the element to be filled by the ajax call

$('.ajax5').ajaxContent({
target:'#ajaxContent5',
beforeSend:function(obj,target){
alert('I am an ajaxContent link with classes:' + $(obj).attr('class') + "\n" + 'and my target has id:' + $(target).attr('id'));
},
success: function(obj,target,msg){
$(obj).css({color: 'blue'});
$(target).css({border:'7px solid blue'});
},
error: function(target){
$(target).css({color: 'red',fontSize:'24px',border:'3px dotted ##FF0000'});
},
errorMsg:'Something went wrong'
});
HTML AS first example

Image 1 Image 2 Image 3

Extend to injected code

From version 2.1 the plugin offer a set of EXTEND options to attach a new 100% customizabile ajax event to the code injected from the fisrt call. For running the new event you must set the "extend" options to "true" and supply the plugin the "filter" attribute that represent the element injected from the first call that will receive the instructions to perfom the new ajax event. Basically the behaviour was possible using the liveQuery plugin with a bit of overhead respect to the embedded ajaxContent functionality.

All the settings that are normally used to personalize ajaxContent are provided with "ex_" prefix to customize the second event

By default the second event looks as en element with id "ajaxExtend" as target element

Basic Extend Example

$('.ajax8').ajaxContent({
target:'#ajaxContent8',
extend:'true',
filter:'.ajaxLoad',
ex_target:'#ajaxContent9'
});
<a class="ajax8" href="examples/ajaxcontent/extend.cfm">Click to load the perform the first call</a>
HTML INJECTED FROM THE FIRST CALL
<a class="ajaxLoad" href="gallery.cfm?pic=image1">Load Image 1 in the new specified target</a>

Click to load the perform the first call

Personalize the extended event

the extended event is fully personalizable using the same options avalable for the normal behaviour with the ex_prefix.

$('.ajax9').ajaxContent({
target:'#ajaxContent10',
extend:'true',
filter:'.ajaxLoad',
ex_target:'#ajaxContent11',
ex_loadingMsg:'This is a personalized loading message set by ex_loadingMsg option',
ex_beforeSend:function(obj,target){
alert('ex_beforeSend option callback');
},
ex_success:function(obj,target,msg){
alert('ex_success option callback. The target background will now become red');
$(target).css({backgroundColor:'red'});
}
});
<a class="ajax8" href="examples/ajaxcontent/extend.cfm">Click to load the perform the first call</a>
HTML INJECTED FROM THE FIRST CALL
<a class="ajaxLoad" href="gallery.cfm?pic=image1">Load Image 1 in the new specified target</a>

Click to load the perform the first call

Form items Binding (depend on forms.js jquery plugin)

"Bind" attribute gives the ajaxContent link the ability to update the parameters in his own query string onchange of a binded form element. This gives the plugin a great flexibility and a lot of more power.

Some basic rules to follow especially for radio and checkbox are in the plugin API

$('.ajax10').ajaxContent({
target:'#ajaxContent12',
bind:'#name,#secondName,#dog,#cat,#sport'
});
<a clas="ajax10" href="examples/ajaxcontent/bindings.cfm">Click here!</a>

Click here!

My Name is :
My Second Name is:
Do I have a dog?: yes no
Do I have a cat?: YesNo
My preferred sports are : Soccer baseball basket

Bind the extend event

An ex_bind attribute is provided to bind also the extended event attached to an item called in the page by the previous ajax call

In the example perfom the first call and after use the select to decide with image to load in the next div

$('.ajax11').ajaxContent({
target:'#ajaxContent13',
extend:'true',
filter:'.ajaxLoad',
ex_target:'#ajaxContent14',
ex_loadingMsg:'Custom loading message for the extended div',
ex_bind: '#pic'
});
<a clas="ajax11" href="examples/ajaxcontent/extend2.cfm">Click here!</a>
HTML INJECTED FROM THE FIRST CALL
<a class="ajaxLoad" href="examples/ajaxcontent/gallery.cfm">Select a pic and then clik me.</a>

Click here!

Select a pic to load: image1 image2 image3

Debug

If required and if Firebug is installed and running, the plugin show in the console the size and the class of the jQuery object involved

$('.ajax6').ajaxContent({
target:'#ajaxContent6',
debug: 'true'
}
});

Use the Metadata Plugin

If the metadata plugin is installed the options will be pulled from the element class attribute.
BTW the metadata plugin is not required for the plugin to work fine in the traditional way.

$('.ajax7').ajaxContent();
HTML
<a class="ajax7 {target:'#ajaxContent7',loaderType:'img',loadingMsg:'loading.gif'}" href="examples/ajaxcontent/gallery.cfm?pic=image1">Image 1</a>

Image 1

Override Defaults

Any default value can be override setting the $.fn.ajaxContent.[option name] function. As you see in the code below this can be made also from outside a $(document).ready block.

THE FOLLOWING CODE CHANGE THE DEFAULT PLUGIN SETTING FOR ANY EVENT IN THE PAGE
(for obvious reason this code do not run on this examples presentation)
.......
$.fn.ajaxContent.defaults.errorMsg = 'This message override the defaults errro message';
$.fn.ajaxContent.defaults.event = 'focus';
$.fn.ajaxContent.defaults.debug = 'true';
$(document).ready(function(){
$('.ajax').ajaxContent();
});