Download
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
Usage
Basic
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.
JS
$('.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.
JS
$('.ajax2').ajaxContent({
event:'mouseover',
target:'#ajaxContent2'
});
HTML
<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 1Text 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 programmed in the options object.
“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 one single 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="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="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>
My Name is :
My Second Name is:
Do I have a dog?:
Do I have a cat?: Yes No
My preferred sports are : Soccer baseball basket
Bind the extended 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="extend2.cfm">Click here!</a>
HTML INJECTED FROM THE FIRST CALL
<a class="ajaxLoad" href="gallery.cfm">Select a pic and then clik me.</a>
Select a pic and click again the code injected in the first div.
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="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();
});
API
To degrade gracefully the instance can be placed only on 'A' element and the plugin use the HREF attributes to perform the call. In this way a non JS browser will follow the link showing the content required.
Options
| target (jQuery) | Default: '#ajaxContent'
( jQuery selectors syntax ). Dom element where call result is loaded. |
| type (string) | Default: 'Get' Attr: 'Post' |
| event (string) | Default: 'Click' Event that will trigger the event call. |
| currentClass (string) | Default: 'selected'
Class attached to the item when event is triggered.The class is removed, at the same time, from any other item making part of the same class set . |
| loader (boolean) | Choose if display a loading message in the target element during the call. |
| loaderType (string) | Default: 'text'
Attr: 'img' By default the plugin show a text loading message. |
| loadingMsg (string) | Default: Loading..... 1) if loaderType is text(default) you can change the text message displayed. 2) if loaderType is set to img you can introduce the relative path to an image to show on loading.. |
| errorMsg (string) | Default: An error occured durign the page requesting process! Customize the error message displayed in case the ajax call generated an error or for timeout. |
| succes (function) Callback |
Success. Run if the ajax call is completed. Take 3 arguments.
|
| error (function) Callback |
Error. Run if the ajax call is broken. Take un argument
|
| loaderType (string) | Default: text. Attr: img By default the plugin show a text loading message. |
| debug (boolean) | Default: false If Firebug is installed and running the plugin show in the console the size and the class of the jQuery object involved. |
Requirments and ChangeLog
| Requirments |
|
| ChangeLog |
|