Joan Gabun

Joined

900 Experience
0 Lessons Completed
1 Question Solved

Activity

Nice. Thanks so much Chris!

As we all know the Rails is currently on version 6.0.3 as of May 06, 2020 (6.5 KB)

Some developers say that it is still not stable and must need to wait for a little while before migrating to the new version. While some say that should use it immediately since it's new.

Any ideas on this? Would want to know the opinions of every Rails developers.

Posted in How to use custom jQuery in Rails 6

I've been thinking about this for a couple of days already.

For some reason my semantic-ui jQuery doesn't work.

So here's what I did.

On my webpack/environment.js:


const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

module.exports = environment

I added a custom.js file with the following codes under app/javascripts/packs:

$(document).on('turbolinks:load', function(){
    $('.ui.dropdown').dropdown();
})

And then inside of my application.js w/c is under app/javascripts/packs I have the ff:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("packs/custom")

On chrome console here's what I see:


Uncaught TypeError: $(...).dropdown is not a function
    at HTMLDocument.<anonymous> (custom.js:3)
    at HTMLDocument.dispatch (jquery.js:4588)
    at HTMLDocument.elemData.handle (jquery.js:4408)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

I thought I did it right but for some reason this solution did not work at all.
Any idea what am I doing wrong?

I am working on Ruby on Rails 6. My application has a controller that uses a different layout called "special":

class BoxController < ApplicationController
  layout "special"
  ...
end

So I've created a new layouts/special.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag "special" %>
  <%= javascript_link_tag "special" %>
  <%= csrf_meta_tags %>
</head>
<body>
 <%= yield %>
</body>
</html>

I then placed my 3rd party css and plugin under vendor->stylesheets and javascript folder:

stylesheets
  -monnom.css
  -mintymon.css

javascript
  -monnom.js
  -mintymon.js

I tried this but did not read my css and js.

What am I doing wrong? What am I missing in order for this work?

Can anyone guide me step by step? a super beginner here.

I will try to explain my issue as much as I can.

I hope you guys can understand and give me an idea / help me.

So I am working on a practice app. There are two separate bootstrap html/css design for both of my dashboard and main site.

https://i.imgur.com/BkGSpMi.png

Here's the dashboard design:

https://i.imgur.com/DDlmBY6.png

Here's the main site design:

https://i.imgur.com/BgANzle.png

Both of these used bootstrap but separate set of custom design css as well js files.

So far I created a CRUD feature for both of my pages and posts (controller, migration, model, views)

https://i.imgur.com/arEhtQu.jpg

Now I am confused on whether I'll create another controller for the dashboard and create a different folder on the views for that and how I can actually link the dashboard to my created pages, controller views so far as well as controller. Wondering also if I can create separate layout file for my dashboard and main site.

I hope it make sense.