Search code examples
jquerymodal-dialogbootstrap-modal

jQuery modal popup not showing element value

After opening a Bootstrap 4.0 modal in an ASP.NET Core 3.1 Razor page, the jQuery shown.bs.modal event is not showing the element value in the modal. But, logging the assigned value to the console shows it correctly. And using show.bs.modal instead still doesn't work. Is the modal popping up prematurely? What could be wrong?

HTML Modal:

<div id="eventModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <p id="pDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

jQuery:

$('#eventModal').modal('show').on('shown.bs.modal', function () {
    $('#eventModal #eventTitle').val("Sample Title");
    console.log($('#eventModal #eventTitle').val()); // This shows correctly.
}
Solution

  • Using the following methods:

    1. .text() - Sets or returns the text content of selected elements
    2. .html() - Sets or returns the content of selected elements (example : including HTML markup)
    3. .val() - Sets or returns the value of form fields

    So, you can use :

    $('#eventModal').modal('show').on('shown.bs.modal', function () {
    $('#eventTitle').text("Sample Title");        
}