Clever Geek Handbook

Bootstrap 3 dynamic header setup

I have the same modal dialog for three different buttons.

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

I thought it would be a simple header setting in the corresponding javascript function using jQuery. However, when debugging, I can see that the title is set accordingly in the code , but after the modal is displayed, the modal title is empty .

How can I display the name of the modal version correctly?

Here's the relevant 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")
+3


source to share


5 answers


Well you are trying to use .val()

in the H4 tag. If it doesn't:

$('#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 with an attribute value="something"

like:

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


Targeting this identifier with $("#example")

and the call .val()

can access or change the attribute value="something"

. Now consider the element <label>

:

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

Notice the missing attribute value="something"

? In this case, since "This is some text" is just plain text, using:

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

is the correct way to get around this. Hope it helps figure it out!

+11


source


.val()

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

For div / other elements (like h4 in your situation) use either .text()

or .html()

whichever situation you want to do. In this case, since this is just text, change your line to:



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


source


It should be

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


source


Try text () instead of val () :

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


source


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 JS do something like:

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


source






More articles:


All Articles