发表新帖
发表新帖

Rails 6: How to add jquery-ui through webpacker?

后端 未结
关注
8 905
失恋的感觉
失恋的感觉 2021-01-05 04:12

I\'m currently trying to implement a datepicker into my application, the problem is that there is no documentation on how to add the jquery-ui-rails gem through

相关标签:
8条回答
  • 无人及你
    2021-01-05 04:28 
    $ yarn add webpack-jquery-ui

    and in application.js

    require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

    did the job for me. (I had setup jquery before which might need some additional config)

    Weblink: https://www.npmjs.com/package/webpack-jquery-ui

    (This is the same process as in Tushar Patil's answer yet with another package).

    0 讨论(0)
  • 执念已碎
    2021-01-05 04:31

    You no longer need to add javascript libraries as gems (which are managed by the bundler). Instead, you add them with yarn and they are managed by webpack (which is enabled by adding the webpacker gem to the Gemfile).

    The following steps worked for me to get jquery-ui working in Rails 6:

    1. On the terminal, inside your application type:
    yarn add jquery-ui-dist
    1. Your config/webpack/environment.js needs to look as follows:
    const { environment } = require('@rails/webpacker')

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

const aliasConfig = {
    'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

    1. Restart your rails server

    2. In the application.html.erb, include the jquery-ui theme:

    <!DOCTYPE html>
<html>
  <head>
    <title>Jquery UI Test</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
    1. Now, in your app/javascript/packs/application.js, you can use jquery-ui:

    NOTE: If you would like to use jQuery inside your views folder, make it available globally

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

// THIS IS MAKING jQuery AVAILABLE EVEN INSIDE Views FOLDER
global.$ = require("jquery")

require("jquery") // Don't really need to require this...
require("jquery-ui")

$(function(){
    // Plain jquery
    $('#fadeMe').fadeOut(5000);

    // jquery-ui
    const availableCities = ['Baltimore', 'New York'];
    $('#cityField').autocomplete( { source: availableCities } );
    $('#calendarField').datepicker( { dateFormat: 'yy-mm-dd' } );
})

    This will work for a page that looks as follows:

    <div id='fadeMe'>I will fade</div>

City: <input type='text' id='cityField' />
Calendar: <input type='text' id='calendarField' />
    0 讨论(0)
  • 失恋的感觉
    2021-01-05 04:32
    1. Run on the terminal (CLI)

    yarn add jquery jquery-ui-dist

    1. Add to the config/webpack/environment.js
    ...

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

const aliasConfig = {
    'jquery': 'jquery/src/jquery',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};

environment.config.set('resolve.alias', aliasConfig);
...
    1. app/javascript/packs/application.js:

    require("jquery-ui")

    1. For the theme add code to any scss file. Do change according to your nee.
    .ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;   
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px; }

.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
    text-decoration: none; }

.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none; }
    0 讨论(0)
  • 独厮守ぢ
    2021-01-05 04:38

    Above steps works fine, removed extra steps

    The following steps worked for me to get jquery-ui working in Rails 6:

    1) On the terminal, inside your application type:
    yarn add jquery-ui-dist

    2) in app/javascript/packs/application.js
    require("jquery-ui-dist/jquery-ui");

    3) In the application.html.erb, include the jquery-ui theme

    <%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>

    4) restart the rails server and webpack dev server.

    0 讨论(0)
  • 难免孤独
    2021-01-05 04:39

    For me a hybrid of several articles, and things worked and looked the most elegant

    CLI:

        yarn add jquery jquery-ui-dist

    app/javascript/packs/application.js:

    // ... SNIP ...
require("jquery")
require("jquery-ui")

    config/webpack/environment.js:

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

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

const aliasConfig = {
    'jquery': 'jquery/src/jquery',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'

};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

    app/views/layouts/application.html.erb

    <%= stylesheet_link_tag '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' %>
    0 讨论(0)
  • 梦谈多话
    2021-01-05 04:40

    Kalman's answer worked for me, although not from the very beginning (I'm writing it in a separate answer as I don't have enough reputation to comment on the original answer yet :) )

    So, beware that when you put require("jquery-ui") in app/javascript/packs/application.js, the functions provided by jquery-ui will not be available in your scripts loaded to individual views with javascript_pack_tag

    The reason for that is that these individual scripts will load before application.js loads.

    To make it work, I had to put require("jquery-ui") in one of these individual scripts that depended on jquery-ui

    BTW, it works in Kalman's example, as he wrote his script directly in application.js, after requiring "jquery-ui"

    0 讨论(0)
 看不清?
提交回复
热议问题