Event listener in JavaScript for Bootstrap 5 modal

Currently, I am utilizing Bootstrap v5.1.3 along with vanilla JavaScript, but it appears that I have misunderstood how to set up modal event listeners. Below is my current setup for two modals:

var firstModal = new bootstrap.Modal(document.getElementById("firstModal"));
var firstModalEL = document.getElementById('firstModal');

firstModalEL.addEventListener('show.bs.modal', function (event) {

    console.log("firstModal");

});
 
var secondModal = new bootstrap.Modal(document.getElementById("secondModal"));
var secondModalEL = document.getElementById('secondModal');

secondModalEL.addEventListener('show.bs.modal', function (event) {

   console.log("secondModal");

});

However, when I trigger the display of the second modal using

secondModal.show();

the event listener for the first modal ends up executing. It seems like something is amiss in my approach. Can anyone pinpoint where I might be making a mistake?

javascriptbootstrap-modaladdeventlistenerbootstrap-5

Answer №1

Even though the bug has already been identified (refer to the comments in the original post), I wanted to showcase a demonstration of setting up multi-modals. Below is the complete HTML code featuring two listeners and two modals:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790c170b1709">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Modal</title>
</head>
<body>
<h3>Modal Events</h3>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal-1">
  Launch demo modal 1
</button>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal-2">
  Launch demo modal 2
</button>

<div class="modal fade" id="myModal-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
                 Modal Test 1
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
                 Modal Test 2
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b372b35">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script>
const modal1   =document.getElementById('myModal-1');
modal1.addEventListener('show.bs.modal', function(event) { console.log("show.bs.modal event 1") });

const modal2  =document.getElementById('myModal-2');
modal2.addEventListener('show.bs.modal', function(event) { console.log("show.bs.modal event 2") })
</script>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Python Selenium, we can see JavaScript in the view page source, but inspecting elements reveals the

I'm currently facing a challenge in accessing links to attachments for a web automation project. The issue lies in the fact that while I can view the HTML Code (divs and tables) when loading the webpage via Chrome and inspecting element, all I see in ...

javascriptjqueryselenium-webdriver

Tips for utilizing an IF statement in a Protractorjs Spec.js document?

I am attempting to execute the spec.js file across multiple browsers using Multicapabilities in conf.js. However, I specifically want a certain line of code to only run for Internet Explorer. I have tried putting this code snippet inside an IF statement w ...

javascriptinternet-explorerseleniumselenium-webdriverprotractor

Refresh the DOM based on changes in Vuex store state

One of the issues I'm facing is with an 'Add To Basket' button that triggers a Vuex store action: <button @click="addToBasket(item)" > Add To Basket </button> The Vuex store functionality looks like this: const actions = { ...

javascriptvue.jsvuex

How to change a POST request to a PUT request using Express and keeping the

In my express app, I have set up two routes like this: router.post('/:date', (req, res) => { // if date exists, redirect to PUT // else add to database }) router.put('/:date', (req, res) => { // update date }) W ...

javascriptnode.jsrestexpressroutes

Adding JavaScript in the code behind page of an ASP.NET application using C#

Currently, my challenge involves inserting a javascript code into the code behind page of an asp.net application using c#. While browsing through various resources, I stumbled upon some solutions provided by this website. Despite implementing them as inst ...

javascriptasp.net

Uncovering the User's Browser Specifically for UC-Mini and Opera-Mini

I'm in need of a script that can identify if the user's browser is uc-mini or opera-mini. These particular browsers do not support the "transition" feature. Therefore, when this specific browser is detected, I would like to deactivate the "trans ...

javascriptjquery

What are the best strategies for enhancing the performance of the jQuery tag:contains() selector

My goal is to extract all elements from a webpage that contain a specific set of words. For example, if I have an array of random words: words = ["sky", "element", "dry", "smooth", "java", "running", "illness", "lake", "soothing", "cardio", "gymnastic"] ...

javascriptjqueryperformancedomoptimization

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

javascripthtmlcssreactjsnext.js

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

javascripthtmld3.js

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

I am currently working on developing a function that will switch the image every half second for 10 iterations. During the final iteration, the image src will be set to the actual value. Everything seems to work fine for the first loop, however, when the s ...

javascriptjquery

Guide for Uploading, presenting, and storing images in a database column with the help of jQuery scripting language

What is the best method for uploading, displaying, and saving an image in a database using jQuery JavaScript with API calls? I am working with four fields in my database: 1. File ID 2. Filename 3. Filesize 4. Filepath ...

javascriptjqueryjsonajax

Detecting Unflushed Requests in Jasmine and AngularJS

I'm encountering some issues passing certain tests after implementing $httpBackend.verifyNoOustandingRequest(). Interestingly, excluding this from my afterEach function allows the tests to pass successfully. However, including it causes all tests to ...

javascriptangularjskarma-jasmine

What is the best way to store the JSON data that is returned in a JavaScript function as a variable

My goal is to save the client's IP address in a variable after fetching it in JSON format from api.ipify.org. I have managed to display the IP if I alert the result, but I am struggling to store it in a variable. This code snippet works: <script& ...

javascriptjsonfunctionvariablesip-address

Exploring the implementation of waterfall in a Node.js application

async.traverse(map, function(item, tnext){ async.waterfall([ function(wnext){ console.log("One"); //performing MongoDB queries db.collection.find().toArray(function(err){ if(err){ ...

javascriptnode.jsmongodbasynchronousasync.js

What is the proper way to access object properties in EJS?

My server has an express API to retrieve food items and I want to display their names on my ejs index file. In order to fetch the data, I have the following code in my server.js file: app.get('/', async (req, res) => { try { fetch ...

javascriptnode.jsarraystemplatesejs

Maintaining sequential order IDs for table rows even after removing records

I currently have a table structured as follows: <table> <tr> <td> <input type="hidden" name="help[0].id" /> </td> <td> <span class="tr-close">X</span> </tr> <tr ...

javascriptjqueryhtml-table

Creating a React functional component that updates state when a specific window breakpoint is reached

Having an issue with my code when it hits the 960px breakpoint. Instead of triggering once, it's firing multiple times causing unexpected behavior. Can someone help me troubleshoot this problem? const mediaQuery = '(max-width: 960px)'; con ...

javascriptreactjsreact-functional-component

The issue arises when trying to apply Bootstrap CSS styles to dynamically created elements using JavaScript

I utilized JavaScript to create a Bootstrap Modal and followed the correct classes as outlined in the Bootstrap documentation, but unfortunately, the JavaScript-created elements are not being affected. Even after adding the Bootstrap classes and attribute ...

javascriptbootstrap-5

Encountered a snag while executing Powershell with Selenium: Error message - unable to interact with

Looking to update a textarea with a value? The script below triggers an error stating "element not interactable". This occurs because the textarea is set to "display:none". However, manually removing the "NONE" word allows the script to successfully set th ...

javascriptpowershellselenium

Creating a file by piping the output of an asynchronous HTTP request while utilizing async await method

I have been diligently following the instructions and conducting thorough research for a whole day to figure out how to use a pipe to compile an Excel spreadsheet that is fetched through an API call. I managed to get part of the way in saving it, but unfor ...

javascriptnode.jsrest