title: How can I pass data into a bootstrap model?
body: <p>My basic environment is node.js, <a href="http://sailsjs.org" rel="nofollow">sails.js</a>, and MongoDB.</p>
  
  <p>I'm generating an SVG with data and coordinates pulled from a DB and using the 'onclick' functionality to call a function which opens a modal window. My end goal is to be able to click on a shape (represents a bench) and have a modal open with the db info for that shape/bench. What I'm having issues with is figuring how to pass data to the modal so it knows which shape/bench I selected and lists the data for that db object. Currently if I open a modal by selecting a bench it lists every variable call I make (this.example) as 'undefined' which is obviously because it's not being passed that data.</p>
  
  <p>Example of how I'm generating the shapes/benches:</p>
  
  <pre><code>// Foreach function generates shapes/benches from 'lab' collection in DB.
  // bFill variable is generated within this function based on whether this bench is set to active or not.
  
  &lt;rect 
      id="&lt;%= lab.number%&gt;" 
      x="&lt;%= lab.x %&gt;" 
      y="&lt;%= lab.y %&gt;" 
      fill="&lt;%= this.bFill %&gt;" 
      stroke="#000000" 
      stroke-width="0.25" 
      stroke-miterlimit="10" 
      width="&lt;%= lab.w %&gt;" 
      height="&lt;%= lab.h %&gt;" 
      onclick="bench(this.id)" 
      &gt;
  </code></pre>
  
  <p>Example of the function I'm calling:</p>
  
  <pre><code>function bench(bNum) {
              $('#myModal').modal("show");
          }
  </code></pre>
  
  <p>I'm still a fairly new to JS, JQuery and Bootstrap, so I'm figuring I'm forgetting something glaring obvious. Any help would be greatly appreciated.</p>