Dev Faq
7
votes

Rails 6: Comment ajouter jquery-ui via Webpacker?

J'essaie actuellement d'implémenter un datepicker dans mon application, le problème est qu'il n'y a pas de documentation sur la façon d'ajouter le gem jquery-ui-rails via webpacker.

Il existe probablement un autre moyen d'ajouter des gemmes ou un autre bijou qui répondrait à mes besoins?

2 commentaires

N'utilisez pas de gemmes pour simplement ajouter des bibliothèques javascript, utilisez yarn pour gérer les dépendances javascript et installez jquery-ui en utilisant ce yarnpkg.com/en/package/webpack-jquery-ui .

J'ai essayé d'installer jquery-ui en utilisant yarn mais cela ne le rend pas disponible pour les autres fichiers javascript. Je pense qu'il doit être ajouté en tant que plugin dans webpack, similaire à jQuery, mais je n'ai pas pu faire fonctionner cela, donc j'utilise actuellement des pignons pour jquery et jquery-ui jusqu'à ce que je puisse obtenir une solution satisfaisante en utilisant yarn / webpack .

7 Réponses :

15
votes

Vous n'avez plus besoin d'ajouter des bibliothèques javascript en tant que gemmes (qui sont gérées par le bundler). Au lieu de cela, vous les ajoutez avec yarn et ils sont gérés par webpack (qui est activé en ajoutant le gem webpacker au Gemfile).

Les étapes suivantes ont fonctionné pour que jquery-ui fonctionne dans Rails 6:

  1. Sur le terminal, à l'intérieur de votre type d'application:
<div id='fadeMe'>I will fade</div>

City: <input type='text' id='cityField' />
Calendar: <input type='text' id='calendarField' />
  1. Votre config/webpack/environment.js doit se présenter comme suit:
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' } );
})

  1. Redémarrez votre serveur rails

  2. Dans le jquery-ui application.html.erb , incluez le thème jquery-ui :

<!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. Maintenant, dans votre app/javascript/packs/application.js , vous pouvez utiliser jquery-ui :

REMARQUE: si vous souhaitez utiliser jQuery dans votre dossier de views , rendez-le disponible dans le monde entier

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

Cela fonctionnera pour une page qui ressemble à ceci:

yarn add jquery-ui-dist

10 commentaires

Je veux juste souligner, pour les débutants, que vous devez redémarrer votre serveur rails après avoir mis à jour votre config/webpack/environment.js , sinon cela ne fonctionnera pas. Cette réponse a fonctionné et m'a aidé à résoudre le problème avec jquery ui. Travailler sur une application Rails 6 ici. Bravo pour la réponse très détaillée aussi!

Merci @RicardoGreen - J'ai mis à jour ma réponse avec votre suggestion

jQuery.ui renvoie toujours undefined pour moi

For me fonctionne quand j'ai changé aliasConfig: const aliasConfig = {'jquery': 'jquery / src / jquery', 'jquery-ui': 'jquery-ui-dist / jquery-ui.js'};

Tu es mon héros. J'ai lutté avec ce problème pendant environ 3 heures. Impossible de redéfinir le jquery-ui.

Haha - heureux que ma réponse vous ait aidé! :)

Cela ne fonctionne pas pour moi lorsque j'inclus la saisie semi-automatique dans une vue. Par exemple, si vous placez la saisie semi-automatique dans un pack / search.js puis appelez <% = javascript_pack_tag 'search'%> dans la vue, la saisie semi-automatique ne fonctionne pas.

J'ai posté une question sur le problème que j'ai trouvé en essayant d'utiliser cette réponse comme solution ici: stackoverflow.com/questions/65131308/...

@don_Bigote - vous voyez comment dans l'étape 5 ci-dessus j'ai global.$ = require("jquery") Je pense que c'est ce qui rend jQuery disponible dans les vues. Peut-être que si vous faites quelque chose de similaire avec jQuery UI (comme dans global.jQueryUI = require("jquery-ui") ) et que vous vérifiez si jQueryUi est disponible en tant que var globale dans votre vue ???

@Kalman Je le pensais aussi, mais je ne sais pas comment le configurer. J'ai essayé global.jQueryUI = require ("jquery-ui") mais cela ne fonctionne pas.

0
votes

La réponse de Kalman place jQuery dans le cadre des scripts du répertoire app/javascript , mais pas avec les javascript en ligne que vous pourriez avoir sur vos pages Web.

Si vous souhaitez accéder à jQuery à partir de la portée de la page Web, vous pouvez placer jQuery sous le répertoire public , puis modifier app/views/layouts/application.html.erb pour y créer un lien comme ceci:

<!DOCTYPE html>
<html>
  <head>
    <title>JqueryTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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


    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="/jquery-3.4.1.js"></script>
    <%= stylesheet_link_tag "/jquery-ui-1.12.1.custom/jquery-ui.min.css" %>
    <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>


  </head>

  <body>
    <%= yield %>
  </body>
</html>

2 commentaires

Je pense que cela va à l'encontre de l'objectif de Webpacker et de l'importation / exportation ES6 +

aussi avec cela, vous pouvez vous confondre avec des versions conflictuelles ou différentes de jQuery - l'une chargée depuis webpacker et l'autre chargée depuis votre répertoire public/

5
votes

Aucune de ces réponses n'a vraiment fonctionné pour moi. Voici comment j'ai fini par l'implémenter:

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

const webpack = require('webpack');


// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
    loader: 'resolve-url-loader',
    options: {
        attempts: 1
    }
});


// Add an additional plugin of your choosing : ProvidePlugin

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        jquery: 'jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'], // for Bootstrap 4
    })
)

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

};

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

//
module.exports = environment;

puis

// jquery
import $ from 'jquery';

global.$ = $
global.jQuery = $


require('jquery-ui');

// jquery-ui theme
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.css/ );
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.theme\.css/ );

dans votre fichier app / javascript / packs / application.js:

yarn add jquery-ui-dist

et dans config / webpack / environment.js:

yarn add jquery

Un redémarrage de mon serveur a bien fonctionné pour moi. Voici un lien avec des détails sur Webpacker que j'ai utilisé pour faire fonctionner cela:

https://gist.github.com/maxivak/2612fa987b9f9ed7cb53a88fcba247b3#jquery-jquery-ui

3 commentaires

Quelqu'un at-il le problème suivant? CssSyntaxError: /Users/username/Project/my_rails_app/jquery-ui.css:1:1: Unknown word

cela fonctionne en fait sauf ...... pour une raison quelconque lorsque je le charge uniquement via le pack application.js, l'objet jQuery.ui n'est pas défini (sauf que jQuery est défini), mais cela est corrigé si j'ajoute require("jquery-ui-dist/jquery-ui"); au pack dans lequel je travaille sur ma page (qui, d'ailleurs, est chargé comme son propre pack via javascript_pack_tag dans la mise en page Rails)

si j'ajoute require("jquery-ui-dist/jquery-ui"); au pack ( en plus de application.js ), alors jQuery.ui est disponible à la fois dans ce module et également globalement sur la console de débogage - jQuery.ui ne sais pas pourquoi cet effet est de cette façon

0
votes

Les étapes ci-dessus fonctionnent bien, les étapes supplémentaires supprimées

Les étapes suivantes ont fonctionné pour que jquery-ui fonctionne dans Rails 6:

1) Sur le terminal, à l'intérieur de votre type d'application:
fil ajouter jquery-ui-dist

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

3) Dans le fichier application.html.erb, incluez le thème jquery-ui

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

4) redémarrez le serveur de rails et le serveur de développement Webpack.

2 commentaires

il manque quelque chose jquery.ui n'est pas chargé pour moi

toujours obtenir jQuery.ui comme non défini

3
votes 
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
0 commentaires
0
votes

Pour moi, un hybride de plusieurs articles, et les choses ont fonctionné et avaient l'air le plus élégant

CLI:

<%= stylesheet_link_tag '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' %>

app / javascript / packs / application.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

config / webpack / environment.js:

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

app / views / layouts / application.html.erb

    yarn add jquery jquery-ui-dist

0 commentaires
0
votes
  1. Exécuter sur le terminal (CLI)

    2. yarn add jquery jquery-ui-dist

    1. Ajouter au fichier config / webpack / environment.js
    .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; }
    1. app / javascript / packs / application.js:

    require("jquery-ui")

    1. Pour le thème, ajoutez du code à n'importe quel fichier scss. Changez selon vos besoins.
    ...

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);
...
0 commentaires

Articles qui pourrait vous intéresser :

Rails 5 ActiveRecord facultatif inclus où pour l'attribut d'association imbriquée
Problème lors de l'installation de ruby-2.7.1
Rails 6 et Highcharts
Insertion groupée ActiveRecord avec has_one