Generating a fancybox iframe modal from a google visualization datatable

I've been trying for a little while to create an iFrame modal to deliver content and interactivity from within a google visualization data table. The solution was to use fancybox and then escape the characters.

The tools:

1. use Google data tables to add sort/etc. functionality to a table.

2. install and fancybox and jquery accessories

3. enable HTML for the column you wish to call the modal from and then escape the chars.

IMPORTANT: note the allow HTML and the \" (this is how you must escape the double quotes in order to not break the data structure).

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      function drawTable() {
 var options = {'showRowNumber': false, 'allowHtml': true, 'pageSize': 10, 'page': 'enable', 'sortColumn': 0, 'sortAscending':false}
        var data = new google.visualization.DataTable();

data.addColumn('date', 'Date Done');
data.addColumn('number', 'Pounds');
data.addColumn('number', 'Kilos');
data.addColumn('number', 'Reps');
data.addColumn('string', 'Lifts');
data.addColumn('string', 'Comments');
data.addColumn('string', 'ranked');
data.addColumn('string', 'edit');

data.setCell(0,0,new Date(2008,5,2));
data.setCell(0,5,'<a class=\"fancybox fancybox.iframe\" href=\"fancybox/demo/iframe.html\">testing</a>');

var table = new 

The result? Check out:

This means you can open an editor form or info window from an HTML link that is embedded within a google datatable. Thanks to fancybox you can even refresh the parent (google datatable) from the close link within the modal...

Happy coding

No comments:

Post a Comment