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.

I don't get this, are you trying to make an ajax request? – Games Brainiac Jul 22 '13 at 13:21 — Games Brainiac, Jul 22 '13 at 13:21
@GamesBrainiac no I am not. Thats way out of my league – pepper5319 Jul 22 '13 at 13:24 — pepper5319, Jul 22 '13 at 13:24

Paolo Casciello · Accepted Answer · 2013-07-22T13:33:47.287

2

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.

edited Jul 22 '13 at 13:33

answered Jul 22 '13 at 13:20

Paolo Casciello

7,982
1
43
42

@user2564732 look at the code i added to my answer. could you try? – Paolo Casciello Jul 22 '13 at 13:34
but is the event handler called?? cause i see a problem in the event handler code. it should be: $('.AddBookDialog').on('click' .... and not document and 3 arguments. And beware to return false in the event handler. – Paolo Casciello Jul 22 '13 at 13:40
I posted my answer, based off yours. Thanks for your help! – pepper5319 Jul 22 '13 at 13:45

score 2 · Answer 2 · answered Jul 22 '13 at 13:40

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.

pepper5319 · Answer 3 · 2013-07-22T14:37:18.327

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 );

Did you try my method? It appears that you'll have to manually set each and every link using @Paolo's method. I also took the time to create a CodePen for you. Please check it out. Thanks. — Adam Grant, Jul 22 '13 at 13:48

Passing Data to Bootstrap Modals

3 Answers3