jQuery Forum

Hello,

Disclaimer: I am new to JQuery and have been learning mostly on my own, so I may be violating a lot of best practices

Question: How can I store Data to the DOM while it is being generated with JQuery templates?

Issue: I am using JQuery Templating to present a lot of hierarchical data in a standard format and create graphs.  Below the $data variable represents the unique id of a data section (i.e. '2-1-0').  I'm also passing a line, bar and pie boolean as to whether or not those types of chart should be created.

1. <script id="graphAreaTmpl" type="text/x-jquery-tmpl">
2.       <div class="graphcontainer" id="${$data+'gcnt'}" >
3.       {{if $item.line}}
4.             <div id = ${$data + 'line'}></div>
5.       {{/if}}
6.       {{if $item.bar}}
7.             <div id=${$data + 'bar'}></div>
8.       {{/if}}
9.       {{if $item.pie}}
10.             <div id=${$data + 'pie'}></div>
11.       {{/if}}
12. </div>
13. ${ storeGData($data, $item.gData)}

For performance's sake, I would like to render these graphs only if the user clicks on a button, so basically, I want to store the data associated with these graphs using the JQuery .data() function, preferably to the

1. <div class="graphcontainer" id="${$data+'gcnt'}" >

However, when I try to do so directly after this template using javascript, the data function doesn't seem to store the object.  For example after the closing </div> tag, I tried calling a function:

1. function storeGData(id, gData)
2. {
3.       $( '#' + id + 'cnt').data('gData', gData);
4.       var test = $( '#' + id + 'cnt').data('gData');
5. }
   

The test variable is basically undefined each time.  In testing, I can see the values are there, but the data function doesn't seem to be storing.  I believe this is probably a result of using templating and a lack of understanding about how it works, but any ideas you can provide to attack this problem would be greatly appreciated.