model not showing - Githubissues

leeadh commented 4 years ago

I installed this using yarn for rails 6. I have this in my application.js

import 'bootstrap' require('data-confirm-modal') require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery")

However, when I try to test it, there is no modal coming up. it just shows a blank. Any reason why?

tagliala commented 4 years ago

Hi,

please take a look at our webpacker section in the readme: https://github.com/ifad/data-confirm-modal#webpacker

leeadh commented 4 years ago

@tagliala i had already done that also... didnt work

tagliala commented 4 years ago

Any chance to provide a reproducible test case?

leeadh commented 4 years ago

sure... how can i provide u one?

tagliala commented 4 years ago

@leeadh create a new repo on github with a basic rails application demonstrating the issue

I have a working test (Rails6/yarn/webpacker/BS4) here: https://github.com/diowa/ruby2-rails6-bootstrap-heroku/tree/test/test-data-confirm-modal

Relevant commit: https://github.com/diowa/ruby2-rails6-bootstrap-heroku/commit/26a0334e0735c1793f70f2098b22c2a17a476504

leeadh commented 4 years ago

Hi @tagliala i have done so : https://github.com/leeadh/reservation_system

tagliala commented 4 years ago

Thanks @leeadh

I've spotted some errors, because the application is mixing BS3 (via css) and BS4 (via javascript), so data-confirm-modal is confused

Please fix the following:

gem is not required when using with webpack, please remove this: https://github.com/leeadh/reservation_system/blob/master/Gemfile#L24
please remove bootstrap-sass from gemfiles and all references to bootstrap/sprockets or bootstrap in css
please also remove bootstrap from gemfiles, because you can reference the css from webpacker (you were in any case using that)
fix environment.js as per documentation https://github.com/ifad/data-confirm-modal#webpacker
node package is required, please run yarn add data-confirm-modal
fix application.js

here it is a diff. Apologies for the change in Ruby version, please ignore it

diff --git a/Gemfile b/Gemfile
index 7d743e0..4faf924 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }

-ruby '2.6.1'
+ruby '2.6.6'

 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 6.0.3', '>= 6.0.3.2'
@@ -18,10 +18,7 @@ gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
 gem "simple_calendar", "~> 2.0"
-gem 'bootstrap-sass', '~> 3.3.6' 
-gem 'bootstrap', '~> 4.5.0'
 gem 'jquery-rails'
-gem 'data-confirm-modal'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
 # Use Active Model has_secure_password
diff --git a/Gemfile.lock b/Gemfile.lock
index e7928a8..e034779 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -58,18 +58,9 @@ GEM
       zeitwerk (~> 2.2, >= 2.2.2)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    autoprefixer-rails (9.8.5)
-      execjs
     bindex (0.8.1)
     bootsnap (1.4.6)
       msgpack (~> 1.0)
-    bootstrap (4.5.0)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
-      sassc-rails (>= 2.0.0)
-    bootstrap-sass (3.3.7)
-      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.4)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.33.0)
@@ -83,10 +74,7 @@ GEM
     childprocess (3.0.0)
     concurrent-ruby (1.1.6)
     crass (1.0.6)
-    data-confirm-modal (1.6.3)
-      railties (>= 3.0)
     erubi (1.9.0)
-    execjs (2.7.0)
     ffi (1.13.1)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
@@ -117,7 +105,6 @@ GEM
     nio4r (2.5.2)
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
-    popper_js (1.16.0)
     public_suffix (4.0.5)
     puma (4.3.5)
       nio4r (~> 2.0)
@@ -158,11 +145,6 @@ GEM
       ffi (~> 1.0)
     regexp_parser (1.7.1)
     rubyzip (2.3.0)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
@@ -223,11 +205,8 @@ PLATFORMS

 DEPENDENCIES
   bootsnap (>= 1.4.2)
-  bootstrap (~> 4.5.0)
-  bootstrap-sass (~> 3.3.6)
   byebug
   capybara (>= 2.15)
-  data-confirm-modal
   jbuilder (~> 2.7)
   jquery-rails
   listen (~> 3.2)
@@ -246,7 +225,7 @@ DEPENDENCIES
   webpacker (~> 4.0)

 RUBY VERSION
-   ruby 2.6.1p33
+   ruby 2.6.6p146

 BUNDLED WITH
-   1.17.2
+   1.17.3
diff --git a/app/assets/stylesheets/meetings.scss b/app/assets/stylesheets/meetings.scss
index 766db97..8d608c4 100644
--- a/app/assets/stylesheets/meetings.scss
+++ b/app/assets/stylesheets/meetings.scss
@@ -2,10 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/

-@import 'bootstrap-sprockets';
-@import 'bootstrap';
 @import "simple_calendar";

 .alert {
-    
-}
\ No newline at end of file
+
+}
diff --git a/app/assets/stylesheets/rooms.scss b/app/assets/stylesheets/rooms.scss
index d8f0a73..4d24644 100644
--- a/app/assets/stylesheets/rooms.scss
+++ b/app/assets/stylesheets/rooms.scss
@@ -1,6 +1,4 @@
 // Place all the styles related to the Rooms controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
-@import 'bootstrap-sprockets';
-@import 'bootstrap';
-@import "simple_calendar";
\ No newline at end of file
+@import "simple_calendar";
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 17e8e18..bc474a4 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -9,11 +9,9 @@ require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 require("jquery")
-import 'bootstrap'
-//require('data-confirm-modal')
+require('data-confirm-modal')

-
-//= require jquery 
+//= require jquery

 // Uncomment to copy all static images under ../images to the output folder and reference
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index dfe6220..2728c5d 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,11 +1,13 @@
 const { environment } = require('@rails/webpacker')
 const webpack = require("webpack")

-environment.plugins.append("Provide", new webpack.ProvidePlugin({
-        $: 'jquery',
-        jQuery: 'jquery',
-        Popper: ['popper.js', 'default']
-    })
+environment.plugins.prepend(
+  'Provide',
+  new webpack.ProvidePlugin({
+    $: 'jquery',
+    jQuery: 'jquery',
+    Popper: ['popper.js', 'default']
+  })
 )

-module.exports = environment
\ No newline at end of file
+module.exports = environment
diff --git a/db/migrate/20200718183155_add_title_to_meetings.rb b/db/migrate/20200718183155_add_title_to_meetings.rb
index b812802..2fe99c6 100644
--- a/db/migrate/20200718183155_add_title_to_meetings.rb
+++ b/db/migrate/20200718183155_add_title_to_meetings.rb
@@ -1,5 +1,5 @@
 class AddTitleToMeetings < ActiveRecord::Migration[6.0]
   def change
-    add_column :meetings, :title, :string
+    # add_column :meetings, :title, :string
   end
 end
diff --git a/package.json b/package.json
index 4a0bc7d..79b6418 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.2.2",
     "bootstrap": "4.3.1",
+    "data-confirm-modal": "^1.6.2",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1",
     "turbolinks": "^5.2.0"
diff --git a/yarn.lock b/yarn.lock
index c167842..a9944ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2340,6 +2340,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"

+data-confirm-modal@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/data-confirm-modal/-/data-confirm-modal-1.6.2.tgz#81fc8ea298cfd9311d066915d1710b3cfa57d96b"
+  integrity sha512-UYYgx8hS65X8Y336YRp1x6A5Gfkhh4iYkLq5jw7oS++hTcq/3yO8JOrbfHvvr7qqqQxBSPRyvUXnFEFIr4ja4w==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"

Hope it helps

cpapidas commented 3 years ago

I had the same problem 👍

tagliala commented 3 years ago

Closing here as per https://github.com/ifad/data-confirm-modal/issues/81#issuecomment-661224632

ifad / data-confirm-modal

model not showing #81