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"  role="dialog">
    <div >
        <div >
            <div >
                <button type="button"  data-dismiss="modal">&times;</button>
                <h4 ><span id="eventTitle"></span></h4>
            </div>
            <div >
                <p id="pDetails"></p>
            </div>
            <div >
                <button type="button"  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.
}

CodePudding user response：

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