Passing Data to Bootstrap Modals

Question

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal

#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open-  AddBookDialog " href="#addBookDialog">{{ name }}</a><br />

#Modal
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>

     </div>
     <div class="modal-body">
         <input type="text" name="nameId" id="nameId" />
         <p>some content</p>

     </div>
</div>

#JavaScript
 <script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
    var myNameId = $(this).data('id');
    $("modal-body #nameId").val( myNameId );

    });
</script>

What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

Solution 1

the header is the first h3 in the modal. So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)

Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals

Here's the code:

#Modal
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 class="hdrtitle">This is the header</h3>
     </div>
     <div class="modal-body">
         <input type="text" name="nameId" id="nameId" />
         <p>some content</p>

     </div>
</div>

Using a code like:

$('.modal .hdrtitle').html('This is the header');

and then showing it with:

$('.modal').modal('toggle');

works.

Solution 2

The one-off way

If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:

$('.header-link').click(function(e) {
   $('.modal-header h4').html($(e.target).html())
})

CodePen Demo

This will just take the text (actually the HTML) in the link itself and put that in the header.

Using a library

If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

Solution 3

I found the answer. Thanks to @PaoloCasciello for a layout.

Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.

<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
         <button class="close" data-dismiss="modal">×</button>
         <h3 id="nameId" />

      </div>
      <div class="modal-body">
         <p>some content</p>
      </div>
 </div>


<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 $(".modal-header #nameId").html( myNameId );