Dynamically set text in modal using form data?

Question

I am working on making a website and I am having some trouble.

On one page there is a table of names that looks something like this:

<table class="table" id="table">
    <thead>
        <tr>
            <th id="name">Teacher</th>
            <th id="courses">Courses</th>
        </tr>
    </thead>
<tbody>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="1">Katherine Crowley</a></td>
    <td>English</td>
</tr>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="2">Seraphine Hamilton</a></td>
    <td>English</td>
</tr>

There are more entries, but that is a good example. When you click on the name in the table, "Katherine Crowley" in this example, a modal opens up, where I would like to have information on the person. Here is the code for the modal:

<div class="modal" id="myModal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" href="#name"></h4>
    </div><div class="container"></div>
    <div class="modal-body">
      Content
      <br>
      <br>
      <br>
      <p>more content</p>
      <br>
      <br>
      <br>
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div>
</div>

The idea is that the title of the modal will be set to the name of the person, and then in the content area, the courses will be listed.

Does anyone know how I can do this??

I am fairly new to all of this, so as much detail as possible would be appreciated.

Thanks!

EDIT: Look in the comments below this. Dan commented a link to another question, where I found what I was looking for. If a mod could mark this question as a duplicate, that it would be appreciated.

Look at this question: http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — Dan, Jun 03 '14 at 16:57
Can't you use multiple modals? Just assign them different IDs. — DivineChef, Jun 03 '14 at 17:27
@Dan: Thank you! That worked perfectly! If you post the link as a solution, I can approve it as correct. — CastleCorp, Jun 03 '14 at 17:56
Not supposed to answer with a link to another question - maybe a mod can mark this as a duplicate? — Dan, Jun 03 '14 at 18:04
@Dan I suppose that will have to do then. Thanks for the help. — CastleCorp, Jun 03 '14 at 18:20

score 0 · Answer 1 · answered Jun 03 '14 at 17:31

I prefer to show the dialog programaticaly instead of using a convention (href has the ID of the modal container). This is what I do:

$(".edit-object").click(function () {
     // sets modal's controls
     $("#txtDamageTypeName").val(damageType.Name); // damageType is a JS object
     // shows modal
     $('#mdlEdit').modal('show'); where mdlEdit is the ID of the modal container.
});

I hope it helps. If you have any other doubt, please let me know.

score 0 · Answer 2 · edited Feb 04 '21 at 20:34

To show the dialog as desired, you must use JavaScript (or better yet, jQuery).

Some changes were made to your HTML, mostly for positioning via CSS.

jQuery code makes things appear where they should.

CSS provide the spacings / colors / etc.

JS Fiddle example

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<table class="table" id="table">
<thead>
    <tr>
        <th id="name">Teacher</th>
        <th id="courses">Courses</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
        <td>English</td>
    </tr>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
        <td>History</td>
    </tr>
    </tbody>
</table>
<div class="modal" id="myModal">
    <div class="modal-header">
        <div class="header-left">
            <h4 class="modal-title" href="#name"></h4>
        </div>
        <div class="header-right">
            <button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
        </div><!-- .header-right -->
    </div><!-- .modal-header -->
    <div class="container">
        <div class="modal-body">
            <div class="modal-body-inner"></div>
        </div><!-- .modal-body -->
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div><!-- .modal-footer -->
    </div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>

CSS:

th, td{border:1px solid lightgrey;width:150px;text-align:center;}

#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}

.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}

.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}

#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}

jQuery/JavaScript:

$('document').ready(function() {
    $('[id^=s-]').click(function(){
        var name = $(this).text();
        var course = $(this).parent().next().text();
        $('.modal-title').html(name);
        $('.modal-body-inner').html(course);
        $('#overlay').show();
        $('#myModal').show();
    });
    $('.close_btn').click(function(){
        $('#overlay').hide();
        $('#myModal').hide();
    });

    $('.btn').button();
}); //END document.ready

Notes:

Seems like a lot of code, but print both your original HTML and this revised HTML, and the differences will be immediately clear. Remember, most differences were for CSS styling purposes, which positions things correctly inside the dialog.
jQueryUI was only used to quickly style the buttons. However, the code does require jQuery. Disregard any js bigots who insist you must learn JS before jQuery. Not true.
The modal dialog works by creating three z-indexes. Everything except the #overlay and the #modal-dialog are at the default z-index of 1. The overlay is above that, at value 5. Therefore, when the overlay is visible, all else is under the overlay and cannot be clicked on. Finally, the modal-dialog is above the overlay.
This $('[id^=s-]') means any element whose ID begins with s-. Note that IDs cannot begin with numbers, and prefixing s- provides something by which to select the anchor tag. Once you are in the click event, $(this) is whatever element was just clicked. So, $(this).attr('id'); is the ID of the element that was just clicked. You can also isolate the numerical portion by split (splitting) it off, like so: var num = $(this).attr('id').split('-')[1];
The top article re JavaScript being dead is included only because it does a great job of explaining what jQuery is and why it is (very) useful. JavaScript is not dead, as the author has conceded in a newer blog entry.

Dynamically set text in modal using form data?

2 Answers2