web-dev-qa-db-fra.com

Rails 6: Comment ajouter jquery-ui via webpacker?

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

Il existe probablement une autre façon d'ajouter des gemmes ou une autre gemme qui conviendrait à mes besoins?

5
arnasklas

La réponse de Kalman place jQuery dans la portée des scripts du app/javascript répertoire mais pas avec le 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 dans le répertoire public puis modifier app/views/layouts/application.html.erb pour y accéder 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>

1
webprogrammer

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

Les étapes suivantes ont fonctionné pour moi 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 Rails et le serveur de développement webpack.

0
Tushar Patil