Question 381788 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Bootstrap modal not triggering after upgrading to Bootstrap 5 and jQuery 3 in ASP.NET Core

Recently I updated jQuery from v2.2.4 to v3.7.1 and Bootstrap from v2.2.2 to v5.0.2 in my ASP.NET Core project. After the update, I’m facing an issue where modal pop-ups are not triggering when buttons are clicked, even though the identical setups are working perfectly on other pages. I’ve confirmed that both Bootstrap and jQuery are loaded correctly through console logs and other functionalities.

jquery and bootstrap loading

Here is an example of the button that fails to trigger the modal:

<a class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#userSyncConfigHelp">Help</a>

<div style="display: none;" class="modal biggerModal" id="userSyncConfigHelp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">User Sync Config Help</h3>
            </div>
            <div class="modal-body">
                <p>Hello World</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

When clicking the ‘Help’ button, nothing happens. However, if I use the following button version from the Bootstrap documentation:

<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

It merely appends the modal ID to the URL (e.g., adding #userSyncConfigSampleAzureAD to the URL). This issue does not occur with other similar setups on other pages where modals are functioning correctly, such as:

<a class="btn btn-small" data-bs-toggle="modal" data-bs-target="#snippetHotKeysHelp">Help</a>

<div style="display: none;" class="modal biggerModal" id="snippetHotKeysHelp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Snippet Hotkeys Help</h3>
            </div>
            <div class="modal-body">
                <p>Hello World</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Suspect the issue might be related to how Bootstrap’s JavaScript interacts with the new version of jQuery, or perhaps a configuration problem specific to certain pages.

Question: Has anyone experienced similar issues when upgrading these libraries, and how might I resolve the modal trigger issue?

Update:

If I type bootstrap in the console on the working pages it returns bootstrap but if I try it on the problem page it returns a ReferenceError.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After numerous attempts, I finally discovered the error. It wasn't related to the modal or button, but rather an issue when trying to import Monaco for an editor, which caused the following error:

    Uncaught Error: Can only have one anonymous define call per script file at e.enqueueDefineAnonymousModule (monaco.js:7:19083) at r (monaco.js:7:26536) at bootstrap.min.js?=1713860448510:6:151 at bootstrap.min.js?=1713860448510:6:256

    I found a good solution. In my case, I simply needed to move the script import. Here's the corrected code:

    @section scripts
{
    <script src="~/bundles/monaco.js"></script>
    <script>
        require.config({
            paths: {
                'vs': '/Scripts/monaco/vs'
            }
        });

        require(['vs/editor/editor.main'], function () {
            var editor = monaco.editor.create(document.getElementById('container'), {
                value: [
                    'function x() {',
                    'tconsole.log("Hello world!");',
                    '}'
                ].join('n'),
                language: 'javascript'
            });
        });
    </script>
}

  2. 0

    The Bootstrap Modal is not working at your end as it depends on the Popper.js. From your screenshot, you did not import the popper.js.

    Make sure that you import the Popper.js file before the Bootstrap.js.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>

    Alternatively, you can import bootstrap.bundle.js as it includes Popper.js.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>

    Demo @ StackBlitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search