Setting a Bootstrap 3 modal title dynamically

Question

I have the same modal dialog for three different buttons.

However, depending upon which button is clicked, I need to dynamically set the title of the modal dialog.

I thought this would be simple setting the title in the appropriate javascript function using jQuery. However, when debugging, I can see the title is set accordingly in the code, but after the modal is displayed, the modal title is blank.

How can I properly display the modal title accordingly?

Here is the pertinent part of the HTML:

<div class="modal fade" id="btnJournalVoucherEditGrid" tabindex="-1" role="dialog" aria-labelledby="btnJournalVoucherEditGrid-label" aria-hidden="true">


<div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                            <h4 class="modal-title" id="btnJournalVoucherEditGrid-label"></h4>

Here is the JS

function onEditJournalVoucher(gdId, rwID)
{
  $('#btnJournalVoucherEditGrid-label').val("Edit Journal Voucher")

Answer 1

Well, you're trying to use .val() on an H4 tag. Should it not be:

$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");

or

$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher");

.val() is the right mindset, but what it does in JQuery is why it won't work in this situation. Take an element that has a value="something" attribute, for example:

<input id="example" type="text" name="something" value="something"/>

Targeting this id using $("#example") and calling .val() can access or change the value="something" attribute. Now take a look at a <label> element:

<label id="example"> This is some text </label>

Notice the lack of a value="something" attribute? In this case, since "This is some text" is simply plain-text, using:

$("#example").text("Updated Text");

is the correct way to go about this. Hope that helps clear things up!

Answer 2

.val() is used for form elements (like inputs, checkboxes, etc.)

For divs/other elements (e.g. h4 in your situation) use either .text() or .html() depending on the situation you want to do. In this case since this is just text change your line to:

$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");