Verwendung von JQueryUI in Ansichten in Rails 6

Dec 04 2020

Ich habe Probleme mit JQuery und JQueryUI in einer Rails 6-App.

JQuery und JqueryUI arbeiten beide in application.js

JQueryUI funktioniert jedoch nicht in Ansichten. Wie mache ich es in beiden Fällen? Mein Code ist unten.

Ich rannte yarn add jquery

Ich rannte yarn add jquery-ui-dist

In environment.js :

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

environment.plugins.prepend('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);

module.exports = environment

In application.js :

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery-ui");
require("custom/scripts")

Ich teste JQuery und JQueryUI in einer benutzerdefinierten Datei / scripts.js und in packs / search.js

custom / scripts.js wird in application.js geladen und sieht folgendermaßen aus:

$(document).ready(function(){
  var test = $().jquery console.log('custom/scripts.js JQuery version ==> ' + test); var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('custom/scripts.js UI version ==> ' + test_ui);
});

packs / search.js wird in die Ansicht mit geladen

<%= javascript_pack_tag "search" %>

packs / search.js sieht folgendermaßen aus (genau wie custom / scripts.js):

$(document).ready(function(){
  var test = $().jquery console.log('packs/search.js JQuery version ==> ' + test); var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('packs/search.js UI version ==> ' + test_ui);
});

Das Ergebnis in der Konsole:

custom/scripts.js JQuery version ==> 3.5.1
custom/scripts.js UI version ==> 1.12.1
packs/search.js JQuery version ==> 3.5.1
packs/search.js UI version ==> jQuery-UI not detected

Antworten

1 NinhLe Dec 15 2020 at 11:50

Das Problem ist möglicherweise, wie Webpack das Plugin auflöst. Ich habe diese Zeile entfernt

 $: 'jquery'

in environment.jsund scheint wie es funktioniert!