title: Passing data to Bootstrap 3 Modal
body: <p>I have a table with a bunch of data, and I've placed a button at the end of each row that I want to use to trigger a modal and pass the unique id of that row into the modal. </p>
  
  <p>I found this answer: <a href="https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal">Passing data to a bootstrap modal</a></p>
  
  <p>But it doesn't appear to work with Bootstrap 3, and I can't find any data about this anywhere any ideas?</p>
  
  <p>I'm using the same code listed:</p>
  
  <p>Header:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet"&gt;
  &lt;link href = "bootstrap/css/styles.css" rel = "stylesheet"&gt;
  &lt;script type="text/javascript"&gt;
  $(document).on("click", ".open-AddBookDialog", function () {
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
  });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>&lt;a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog"&gt;test&lt;/a&gt;
  </code></pre>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal" id="addBookDialog"&gt;
  &lt;div class="modal-header"&gt;
  &lt;button class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
  &lt;h3&gt;Modal header&lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  &lt;p&gt;some content&lt;/p&gt;
  &lt;input type="text" name="bookId" id="bookId" value="" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The resulting page will open the modal, but the text field is blank.</p>
  
  <p>I forgot to mention, I do have both jquery and bootstrap loaded:</p>
  
  <pre><code>&lt;script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src = "bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>