title: Set ColdFusion variables in JS for use in jQuery?
body: <p>I am trying to toggle a dynamic number of divs if a user clicks a little pencil glyph. I'm setting the IDs for the glyph and the hidden divs as "pencilX" and "hiddenY" where X and Y correspond to the autoincrementing ID as stored in the database. Here is the code I have:</p>
  
  <p>I will loop through the query of items in the table outputting this code for each item, so that the user can click a different pencil for each item and it will show toggle the div containing the info for that item.</p>
  
  <p>My research so far is pointing me in the direction of having to use AJAX, but I don't understand AJAX very well and I'm wondering if it's really necessary here. I know I can't access the CF variables directly from jQuery, so I'm wondering if I can just set the variables in JS from the CF side before it hits the client, as I am trying to do below. But of course it isn't working!</p>
  
  <p>I have also tried using the ToScript function which isn't working either. jQuery doesn't seem to recognize either.</p>
  
  <pre><code>&lt;cfoutput&gt;
  &lt;!---Query huddle item, set div ID---&gt;
  &lt;cfquery name="huddleItem" datasource="LPKCMA"&gt;
      SELECT *
      FROM CMA_COMM_HDDL
      WHERE ID = 1
  &lt;/cfquery&gt;
  &lt;cfset pencilID = "##pencil" &amp; huddleItem.ID&gt;
  &lt;cfset hiddenID = "##hidden" &amp; huddleItem.ID&gt;
  &lt;!---Div toggle---&gt;
  &lt;script type="text/javascript" language="JavaScript"&gt;
  &lt;!--- Didn't work
      var #toScript(pencilID, "pencil")#;
      var #toScript(hiddenID, "hidden")#;
  ---&gt;
      var pencil = '#pencilID#';
      var hidden = '#hiddenID#';
  
      $(document).ready(function(){
          $('#' + pencil).click(function(){
              $('#' + hidden).toggle('fast');
          });
      });
  &lt;/script&gt;
  &lt;!--- Content below including pencil and div... ---&gt;
  </code></pre>