jQpanels
Ajax Content

Ajax Content

This plugin has been developed for render extremly easy to perform ajax calls. The plugin only need to know the url where is generated the html to inject in the page and the element that will receive the code...and that's it.

Find more examples and documents in the Api Browser Page

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
Image 1 
Image 2 
Image 3

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'
});
Click to load the perform the first call
HTML INJECTED FROM THE FIRST CALL
Load Image 1 in the new specified target

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'}); 
}
});
Click to load the perform the first call
HTML INJECTED FROM THE FIRST CALL
Load Image 1 in the new specified target

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'
});
Click here!

Click here!

My Name is :
My Second Name is: Do I have a dog?:
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'
});
Click here!
HTML INJECTED FROM THE FIRST CALL
Select a pic and then clik me.

Click here!

Select a pic to load:

AndreaCfm