title: Bootstrap Passing Data to a Modal
body: <p>I have read the Bootsrap documentation and even tested their "Varying modal content based on trigger button" example, but that doesn't work.</p>
  
  <p>Any idea on how can I pass a data to a modal so that I will not create multiple modals in my page.</p>
  
  <p>Here is the button that triggers the modal:</p>
  
  <pre><code>&lt;a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="&lt;?= $subj_id ?&gt;" role="button" title="Delete Subject"&gt;&lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And here is the modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;form action="#" method="post"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="deleteSubjectLabel"&gt;Delete Subject&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                      &lt;h4&gt;Do you want to delete this subject?&lt;/h4&gt;
                      &lt;input type="text" id="subjid" name="subjid"&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-danger"&gt;Delete&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And here is the javascript:</p>
  
  <pre><code>&lt;script&gt;
          $('#deleteSubject').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var subjId = button.data('whatever')
            var modal = $(this)
            modal.find('.modal-body input').val(subjId)
          })
      &lt;/script&gt;
  </code></pre>
  
  <p>I also tried the <code>show.bs.modal</code> but nothing happens. I tried to create a separate script to test if the <code>$subj_id</code> is being read through the use of <code>alert</code> but it works.</p>
  
  <p>Any ideas?</p>