Bootstrap 4 experiences issues with modal dialogs

I am experiencing an issue with my code not working on Bootstrap 4. When I click on the 'overview' button, the page darkens but the dialog does not appear. This functionality worked fine with the old version of Bootstrap. Can someone please assist me?

.form-group
          %label.control-label{ :for => "overview" }
            %a.btn.btn-info{ :href=> "#modaloverview", "data-toggle" => "modal"}
              INFO
          .modal.modal.hide.fade#modaloverview{ :tabindex => "-1", :role => "dialog", "aria-labelledby" => "modal-label", "aria-hidden" => "true"}
            .modal-header
              %button.close{ :type => "button", "data-dismiss" => "modal", "aria-hidden" => "true" }
                X
              %h3#modal-label
                titletextetxtetxtext
            .modal-body
              %p
                texttextetxtetxtettxtte
          .controls
            %textarea.form-control.input-xxlarge.allowMarkupShortcut#overview{ :rows => "10", :name => "overview" }
              - if @finding
                - if @finding.overview
                  #{meta_markup(@finding.overview)}
javascriptcssrubybootstrap-modalhaml

Answer №1

Consider modifying your code in the following way:

To enhance functionality, ensure that you include the data-target property in your button element and assign the id of your model as its value.

form-group %label.control-label{ :for => "overview" } 
%a.btn.btn-info{ :href=> "#modaloverview", "data-toggle" => "modal", "data-target" => "#myModal" } INFO 
#myModal.modal.modal.hide.fade#modaloverview{ :tabindex => "-1", :role => "dialog", "aria-labelledby" => "modal-label", "aria-hidden" => "true"} .modal-header %button.close{ :type => "button", "data-dismiss" => "modal", "aria-hidden" => "true" } X 
  %h3
    #modal-label titletextetxtetxtext 
 .modal-body
   %p texttextetxtetxtettxtte .controls                 
    %textarea.form-control.input-xxlarge.allowMarkupShortcut

  #overview{ :rows => "10", :name => "overview" } - if @finding - if @finding.overview #{meta_markup(@findin

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

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling

What could be causing the lack of updates for a watched object in vue?

Although there are many similar questions on this topic, mine has a unique twist. After delving into reactivity in depth, I feel like I have a solid grasp of the concept. However, one thing continues to baffle me: Summary: Why does a watched property det ...

javascriptvue.js

Every time I click once, two unnecessary AJAX calls are triggered, and the DOM remains outdated until I manually refresh the page

Whenever I click on a span, it sends an ajax request to delete the clicked todo from the database. However, in the DOM, the item is not removed until I refresh the page. Here is my index.html file: <ul class="list"> </ul> I noticed ...

javascriptjquerynode.jsajaxexpress

What is the reason for Jquery AJAX appending additional path to the relative path?

I am encountering an issue with the following code snippet $.ajax({ url: "search/prefetch", success: function (data) { $(".result").html(data); alert("Load was performed."); }, dataType: "json" } ...

javascriptjqueryajax

Developing desktop applications using C# scripting

I currently have a C# desktop program that is able to work with new C# plugins. My goal is to modify the existing C# application to allow for scripts to be used as plugins. These scripts could be in JavaScript, Windows Script Host (WSh), or any other form ...

c#javascriptwsh

Creating background images in select tag using only CSS

I am interested in achieving the following task This is a selection drop down form that I need to work on Here is the code snippet: HMTL <select> <option>Country</option> <option>I ...

formscss

Exploring an array using bluebird promises

I am currently facing an issue where I need to iterate over an array containing promises. My goal is to multiply all the values in the array by 2 and then return the updated array: var Bluebird = Promise.noConflict(); var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9 ...

javascriptpromise

Adjust the background shade of specific characters within an input text field

When a user inputs a string into a standard HTML input field (type="text"), such as "2013/13/29", and validation reveals that the number 13 is invalid in this context, I would like to visually highlight it by changing its background color to red while tu ...

cssregexbackground-colorhtml

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

javascriptcssreactjsmaterial-uiappbar

Drop draggable items on top of each other

I'm wondering if there's a way to drag jQuery elements into each other. To illustrate my question, I've duplicated this code (link) and made some style changes. Here is the updated version: Fiddle Link. In the current setup, you can drag e ...

javascriptjqueryhtmljquery-uidraggable

I am attempting to expand an array of objects divided into two distinct inputs within a React component

There is an array of objects named estimate, with keys 'cost' and 'service'. By clicking 'Add', a new index (i) can be added to the array. The problem arises on the first cycle where {'cost': 2500, 'service&apos ...

javascriptreactjsobjectnext.jsspread

Ajax request in Rails not receiving a response from the controller

After troubleshooting a simple GET request to the controller action, I confirmed that the request is being made successfully and there are no issues with the controller executing the action. However, I am not receiving any response data. $.ajax({ url: ...

javascriptruby-on-railsajax

What is the best way to implement conditional styling in Vue.js?

Looking to incorporate a conditional style into my Component. Here is my component: <site-pricing color="primary" currency="$" price="25" to="/purchase" > <template v-slot:title>Complete</templat ...

cssvue.js

InternJS - Unresolved TypeError: The undefined object does not have a property named 'readFile'

I am currently facing an issue with Intern.js during functional testing. The error mentioned in the title has me puzzled as I struggle to figure out how to successfully load json files through FS or require. Despite my best efforts and extensive searches o ...

javascriptnode.jsintern

Is there a way to transform a JSON object into a custom JavaScript file format that I can define myself?

I have a JSON object structured as follows: { APP_NAME: "Test App", APP_TITLE: "Hello World" } My goal is to transform this JSON object into a JavaScript file for download. The desired format of the file should resemble the follo ...

javascriptjsonangularfile

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

javascripthtmldjangofile

Having trouble displaying images from the images folder in React

Currently working on a memory card game using React, but struggling to access the photos in the img folder from app.js. In my app.js file, I attempted to include the photos like so: Even though I have specified a URL for the pictures, they are not appear ...

javascriptreactjsimage

Increasing space at the top with heading

As I scroll down, the header on my website remains in a static position and disappears. However, when I scroll back up, the header reappears wherever the user is on the page. While this functionality works well, I have noticed that as I scroll all the way ...

javascriptjqueryhtmlcss

Is relying on getState in Redux considered clunky or ineffective?

Imagine a scenario where the global store contains numerous entities. Oranges Markets Sodas If you want to create a function called getOrangeSodaPrice, there are multiple ways to achieve this: Using parameters function getOrangeSodaPrice(oranges, s ...

javascriptreactjsreduxreact-redux

Loop through each item in the JSON object

After making an ajax call, I receive a json object in the success callback with the following structure: {test 1: Array(2), test 2: Array(3), test 3: Array(2)} The arrays inside each key have elements that look like this: 0: {IdProduct: "1", ProductName ...

javascriptjquery