Sending variable to a bootstrap modal

Question

I have seen this asked before but a lot of the answers I found where people looking to get a variable into a modal to query a database. However thats not what I want. I just want to send a variable into s modal.

Here is my button the activated the bootstrap modal

<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalNorm" data-id="<?php echo "$issueid";?>">Add New Followup</a>

Then I have a modal code as below. I want the value from data-id to show in the text box named caseid

    <!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <form role="form" method="POST" action="./view_customer?cid=<?php echo "$cid";?>">
                  <input type="text" id="casenoteid" name="caseid" />
                  <div class="form-group">
                    <label for="exampleInputEmail1">The Issue</label>
                      <input type="text" class="form-control" name="issuenote" id="issuenote"/>
                  </div>
                  <input type="submit" class="btn btn-default" value="SAVE NOTE" name="savenote">
                </form>


            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                            Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

then I have the jquery

  <script>
      $(document).ready(function(){
             $('#myModal').on('show.bs.modal', function (e) {
                   var rowid = $(e.relatedTarget).data('casenoteid');
                });
          });
      });
  </script>

Answer 1

This should do:

var $j = jQuery.noConflict(); // you didn't mention any conflicts, though, this would probably be the next issue since you most likely will conflict with the prototype lib

$j(document).ready(function(){
  $j('button[data-toggle="modal"]').click('show.bs.modal', function (e) { // or simply give your button an id to refer to it, i.e. $j('#theButtonId')
    var rowid = $j(this).data('id'); // get the value - .data('id') for " data-id='' ", .data('target') for " data-target='' "
    $j("#casenoteid").val(rowid); // set the value
  });
});