How can I connect a JavaScript function with a Bootstrap Text Input Modal?

My webpage contains a basic Bootstrap Modal with a text input field, which I want to display when the "Report A Bug" button is clicked.

<div class="btn-group" id="exampleModal" role="group">
    <button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
  </div>

   
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
            <div class="input-group">
              <textarea class="form-control" aria-label="With textarea"></textarea>
            </div>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Send Report</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

I am unsure of the best way to trigger it using Javascript. While my project already has a modal call, it's not the same as the HTML-created 'Report A Bug' modal.

 $("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));

EDIT

I attempted to use the Data Target method mentioned below for its simplicity, but the modal does not hide and clicking the button does not make the modal appear. Any suggestions?

<div class="btn-group" role="group">
      <button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
      <button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
    </div>

<div class="modal-report" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Report A Bug</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Send Report</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
javascriptbootstrap-4

Answer №1

To activate the modal, use: 

data-target="#exampleModal"

Make sure you have the correct modal set up:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

For programming purposes, this is what you need to do:

$('#exampleModalLabel').modal('show');

Prior to that, ensure it is initialized with show: false so it only appears when prompted.

$('#exampleModalLabel').modal({ show: false})

The modal container ID should be exampleModalLabel.

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

Identifying tick markers in the event loop of JavaScript and Node.js

Is there a way to determine if a function is called in the current tick or if it will be called in the next tick of Node.js event loop? For instance: function exampleFunction(callback){ // we can call callback synchronously callback(); // or we c ...

javascriptnode.js

The click event is triggering before it is able to be removed by the code preceding the trigger

Here's a scenario I recently experienced that involves some code written using JQuery. It's more of a statement than a question, but I'm curious if others have encountered this as well: <input type="submit" value="Delete" o ...

javascriptjquery

Retrieving an array from a nested JSON structure using $http.get in combination with mongoose and Node.js

In my possession is a JSON representation of an apartment listing: { "_id": { "$oid": "5673d1dcf93fe452d80c2c2c" }, "street": "myStreet", "buildingNumber": 1, "apartmentNumber": 1, "UsersAndQuestions": [ { ...

javascriptjsonnode.jsmongodbmongoose

Exchange SMS messages between server and web application

I'm currently based in Kenya and finding the pricing of Twilio to be quite high. My goal is to send and receive SMS messages, save them in a database, and showcase them on a web app. Do you think it's possible to create this using node.js? What w ...

javascriptnode.jsexpresssmsussd

Guide to Efficiently downloading a PDF file using Vue and Laravel

THE SCENARIO: Client Side: Vue. Server Side: Laravel. Within the web application, I need to enable users to download specific PDF files: I require Laravel to retrieve the file and send it back as a response to an API GET request. Then, in my Vue web ap ...

javascriptphplaravelpdfvue.js

Tips for querying MongoDB schemas that reference other schemas in the field?

Looking to search for a product by its name within the DOC Schema. However, the products are stored as references in another Product Schema with the _id. Below you can find the code snippets to understand the structure: DOC Schema import mongoose from &qu ...

javascriptnode.jsmongodbnext.jsmongoose-schema

Leveraging react-query with next-mdx-remote MDX Components?

I have been using next-mdx-remote in my next.js project. One of the components I've passed to it makes API calls using axios, which has been working well. However, I now want to switch to using react-query. When implementing this change, I encountered ...

javascriptreactjsnext.jsreact-querymdxjs

Tips on securely passing dates in JavaScript without leaving them vulnerable to manipulation

The date and time stored in my database appear to be manipulated when fetched. Specifically, when I send this data directly via email from the server, the date and time change. When accessing the date on the client side, it appears as expected. However, i ...

javascriptnode.jsdatedatetimetime

Learn the Method Used by Digg to Eliminate "&x=0&y=0" from their Search Results URL

Instead of using a regular submit button, I have implemented an image as the submit button for my search form: <input id="search" type="image" alt="Search" src="/images/searchButton.png" name="" /> However, I encountered an issue in Chrome and Fire ...

javascripthtmlformsdigg

Get the docx file as a blob

When sending a docx file from the backend using Express, the code looks like this: module.exports = (req, res) => { res.status(200).sendFile(__dirname+"/output.docx") } To download and save the file as a blob in Angular, the following code snippet i ...

javascriptangularjsexpress

Using Node.js to read and replicate a JSON file

As someone who is relatively new to the world of NODE.JS, I am eager to level up my skills. Currently, I have a NODE.JS script that gathers data from a feed, resulting in a large JSON file. This file is then used by webpages and mobile apps to display con ...

javascriptjqueryjsonnode.js

"Enhancing Real-Time Communication in Angular with Websockets and $rootScope's Apply

Currently, I am experimenting with an Angular application that utilizes a websocket to interact with the backend. I've encountered some challenges in getting Angular's data binding to function correctly. In this scenario, I have developed a serv ...

javascriptangularjswebsocket

Link rows to dictionary keys and show their corresponding values

In my React component, I have a list of dictionaries stored in the props as follows: console.log(fruits): [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ] The dictionary entries are: 0: name: 'Apple' color: 'Red&apos ...

javascriptreactjs

Clicking on two links simultaneously to avoid them being blocked as pop-ups

Is there a way to open 2 URLs at the same time with just a click? I'm open to using jquery, javascript or any other method. Priority is on efficiency and speed, but I am open to all options. I attempted using onclick in the anchor tag and also tried ...

javascriptphpjqueryhtmlhref

Using jQuery to target form elements that have a specific class assigned to them

I am facing an issue with targeting input fields within a specific form on a page. The form has a certain class, let's say "has-error," and I want to remove this class from all the input fields in that form. I attempted the following code snippet: t ...

javascriptjqueryhtmlinputjquery-selectors

Display HTML content retrieved from a string saved in a React database

I am currently in the process of creating a React page and facing a challenge with incorporating HTML content from a RTDB that has been styled using "use styles". Here is an example of the styling: import { makeStyles } from '@material-ui/core/style ...

javascriptreactjsmaterial-ui

Utilizing the push method to add a JavaScript object to an array may not be effective in specific scenarios

When I tried using users.push within the 'db.each' function in the code below, it didn't work. However, moving the 'users.push' outside of it seemed to do the trick. Is there a way to successfully push the new objects from db.each ...

javascriptarraysnode.jsobjectarray-push

Is it more effective to utilize a filter or request fresh data when filling in a form's drop-down choices?

Utilizing an axios ajax request, I am retrieving a JSON list of tags related to a specific topic selected from a dropdown. If no topic is chosen, all tags in the database (approximately 100-200 tags) are fetched. The process involves: User selects a topi ...

javascriptajaxvue.js

The act of updating JQuery is causing my javascript code to malfunction completely

I've been attempting to update my jQuery library from version 1.3.2 (compressed) to jquery-1.10.2 (compressed) along with jquery-migrate-1.2.1 (compressed). However, after making this switch, none of the javascript pages on my website seem to be funct ...

javascriptjqueryhtmljquery-pluginsjquery-animate

Resizing svg to accommodate a circle shape

As I work on my vue.js app that involves a plethora of diverse icons, I made the decision to create a small icons builder in node.js. The purpose is to standardize their usage and also "crop" each SVG so it fits perfectly within its parent container by uti ...

javascriptnode.jstypescriptvue.jssvg