CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
sagesky36
sagesky36

Reputation: 4692

Setting a Bootstrap 3 modal title dynamically

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

Upvotes: 4

Views: 33245

Answers (5)

Tim Lewis
Tim Lewis

Reputation: 29268

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!

Upvotes: 16

ggeiger
ggeiger

Reputation: 15

I would set the title in the button:

<button id="edit-journal-voucher" data-title="Edit Journal Voucher" data-toggle="modal" data-target="#btnJournalVoucherEditGrid">Edit this Journal</button>

Then in the JS do something like:

$("#edit-journal-voucher").on("click", funtion(e){
  e.preventDefault();
  var title = $(this).data('title');
  $("h4#btnJournalVoucherEditGrid-label").html(title);
});

Upvotes: 0

Shynggys Kengessov
Shynggys Kengessov

Reputation: 379

Try text() function instead of val():

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

Upvotes: 2

Stephen Reindl
Stephen Reindl

Reputation: 5819

It should be 

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

Upvotes: 3

Confuseh
Confuseh

Reputation: 163

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

Upvotes: 6

Related Questions