In my previous post, we created a chart that represent the increase of a given year by month (from january to december). In this post, we’ll see how to create a pod, for a dashboard for example, that uses the previously created page and gives the possibility to query for a special year, and also to display several years. Once again, we’ll use CFCs to query the database and get the data to our chart.

Here is a preview of what we want to achieve.

Let’s get started! First, a function to load the chart when our page has loaded:

<div id="pod">
<!-- A div that will contain the cart -->
<div id="chartholder" class="binding" url="chart.cfm">

</div>

<!-- Controller for our pod -->
<div id="dataCollector">
<cfoutput>
<form>
<label for="year"> Year :
<select id="year">
<option></option>
<cfloop from="2000" to="2004" index="y">
<option value="#y#">#y#</option>
</cfloop>
</select>
</label>

<label for="yearNumber"> Number of year to display :
<select id="yearNumber">
<option></option>
<cfloop from="1" to="5" index="n">
<option value="#n#">#n#</option>
</cfloop>
</select>
</label>
</form>
</cfoutput>
</div>

</div>

Then some JavaScript. First, a function to call our chart.

if ( $j('.binding') != null ) {

$j.each($j('.binding'),function(){
//console.log($j(this));
divid = $j(this).attr('id');
event = $j(this).attr('url');
//console.log(divid);
doBind({div:divid,url:event});
});

}

When the page has loaded, if there is any element with a class named ‘binding’, get some info (the div ID and the url to call), and call the function doBind:

function doBind(options) {
var $j = jQuery.noConflict();

//Some option (edit for your own)
var defaults = {
div: '',
url: '',
injectResult: ''
};
var options = $j.extend(defaults, options);

//Get the div that we want to update
var updatediv = $j('#' + options.div);

//Show a loader on request
updatediv.html('<div><img src="ajax-loader.gif"></div>');

//The ajax request
$j.ajax({
type: 'GET',
url: options.url,
timeout: 2000, //You can edit that value to be able to extend the timeout time
success: function(data) {

//empty the container div
updatediv.html('');

//Hide the container
updatediv.css('visibility','hidden');

//Put the data
updatediv.html(data);

//Show the updated div
updatediv.css('visibility','visible');

},
//On error
error: function (XMLHttpRequest, textStatus, errorThrown) {
updatediv.html('Timeout contacting server.. '+errorThrown);
}
});
}

The function send an ajax request to the url defined in the div, and update the content of the div. The function is well documented I think, but if you have any question, please drop me a comment. We finally need to put some event listener on our form so that at each change, we update the chart.

//Put an event listener on every select of the form
$j("select").change(function() {

//Get the selects values
var year = $j("#year option:selected").text();
var yearNumber = $j("#yearNumber option:selected").text();

//Create the url
url = 'chart.cfm';
if (year != '') url = url +  '?year=' + year;
if (yearNumber != '' && year != '') {
url = url +  '&yearNumber=' + yearNumber;
} else if(yearNumber != '' && year == '') {
url = url +  '?yearNumber=' + yearNumber;
}

//Call the doBind function and then the options
doBind({
div: 'chartholder',
url: url,

});

})

And there you have it! The final JS should look like this.

var $j = jQuery.noConflict();

$j(document).ready(function(){

//Put an event listener on every select of the form
$j("select").change(function() {

//Get the selects values
var year = $j("#year option:selected").text();
var yearNumber = $j("#yearNumber option:selected").text();

//Create the url
url = 'chart.cfm';
if (year != '') url = url +  '?year=' + year;
if (yearNumber != '' && year != '') {
url = url +  '&yearNumber=' + yearNumber;
} else if(yearNumber != '' && year == '') {
url = url +  '?yearNumber=' + yearNumber;
}

//Call the doBind function and then the options
doBind({
div: 'chartholder',
url: url,

});

})

if ( $j('.binding') != null ) {

$j.each($j('.binding'),function(){
//console.log($j(this));
divid = $j(this).attr('id');
event = $j(this).attr('url');
//console.log(divid);
doBind({div:divid,url:event});
});

}

});

function updateChart() {

}

function doBind(options) {
var $j = jQuery.noConflict();

//Some option (edit for your own)
var defaults = {
div: '',
url: '',
injectResult: ''
};
var options = $j.extend(defaults, options);

//Get the div that we want to update
var updatediv = $j('#' + options.div);

//Show a loader on request
updatediv.html('<div><img src="ajax-loader.gif"></div>');

//The ajax request
$j.ajax({
type: 'GET',
url: options.url,
timeout: 2000, //You can edit that value to be able to extend the timeout time
success: function(data) {

//empty the container div
updatediv.html('');

//Hide the container
updatediv.css('visibility','hidden');

//console.log(data);

//Put the data
updatediv.html(data);

//Show the updated div
updatediv.css('visibility','visible');

},
//On error
error: function (XMLHttpRequest, textStatus, errorThrown) {
updatediv.html('Timeout contacting server.. '+errorThrown);
}
});
}

Here is the source code if you want to try it by yourself. This method is a simple way to have a pod being updated by user input, using ajax. But what if I want to interact with the chart directly? I’ll be back…