It has been several days now that i've been trying to make work the easy-autocomplete package with my Rails 6 application.
I followed this tutorial.
I tried some solutions, like this one but it still doesn't work.
In all my attempts the error displayed on the web console is: Uncaught TypeError: $(...).easyAutocomplete is not a function.
Here is my application.js:
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("bootstrap");
// Stylesheets
require("../stylesheets/main.scss");
require("easy-autocomplete");
I don't need to require('jquery') since it's included with the Bootstrap package. I use JQuery functions all over my app and haven't got any errors.
My application.scss:
#import 'easy-autocomplete/dist/easy-autocomplete';
#import "variables";
* {
font-family: $syne-font
}
And my custom js code:
$(document).on("turbolinks:load", function () {
var options = {
data: ["otto", "hans", "paula"],
};
$("#city_search").easyAutocomplete(options);
});
I would advise that you install jQuery using the yarn and also do he configuration in the config/webpack/environment.js. once done require the jQuery as expected from the tutorial.
Try it and it should work.
So the easy-autocomplete lib is not maintained anymore.
I did find a workaround by using the webpack-jquery-ui lib, here's an example of implementation:
app/javascript/packs/application.js
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("bootstrap");
// Stylesheets
require("../stylesheets/main.scss");
global.$ = require("jquery");
require("webpack-jquery-ui");
require("webpack-jquery-ui/css");
$(function () {
$(".my-input-automcompleted").autocomplete({
source: "/autocomplete",
});
});
But IMHO it's better to use Stimulus and the stimulus-autocomplete lib now !
Related
for about 2 hours I am now trying to use libaries like jquery outside of encore with global variables in my app.js, like shown below:
const $ = require('jquery');
global.$ = global.jQuery = $;
this method was explained here: jQuery Plugins and Legacy Applications (Symfony Docs)
But unfortunately I cannot access $ or jQuery in script tags inside my template.
My webpack-configuration does not contain autoProvidejQuery() or other methods other people already suggested to comment out in order to make jQuery accessible outside.
My webpack config:
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('#babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader();
The way I use jQuery at the end of the body (example):
<script>
$('#nav').html('Hello World');
</script>
The resulting exception:
Uncaught ReferenceError: $ is not defined
In summary I have been searching for a solution for quite some time on stackoverflow and other platforms, but no solutions worked out for me so you might have a solution for my problem...
I'm trying to use the Shipping Time JS plugin on my Magento 2 website, it requires both moment.js and jQuery in order to work however it's not working. I'm getting a ReferenceError: moment is not defined in shiptime.js on line 49 which is the following:
try {
if (moment === undefined || $ === undefined ) throw Error("please include jquery & moment.js");
} catch (e) {
console.log(e);
}
==============
My require.js
This is what my requirejs-config.js looks like, it's sitting in app/design/frontend/##/##/requirejs-config.js:
var config = { // eslint-disable-line no-unused-vars
packages: [{
name: 'momentjs',
location: 'js/',
main: 'moment'
}],
map: {
'*': {
'menu': 'Magento_Theme/js/disable-menu',
'shippingtime': 'js/shiptime'
}
},
shim: {
'momentjs': {
deps: ['jquery']
},
'shippingtime': {
deps: ['jquery',',momentjs']
}
}
};
jQuery is loaded elsewhere and is definitely being loaded (I have various other jQuery libraries which are all working).
==============
Debugging
I initially thought the moment.js/shiptime.js files weren't being loaded in however they are when I check both the source and the network panel. To further test this, I did the following to see if moment.js would output anything:
require(['momentjs'], function (moment) {
console.log(moment().format('LLLL'));
});
This does output the date in the console so moment.js is definitely loading, this is my code for the shiptime.js file which isn't working and gives me the error I mentioned above:
require(['jquery', 'shippingtime', 'momentjs'], function (moment) {
jQuery(document).ready(function () {
jQuery(function($) {
jQuery('.shipping-time').shipTime();
});
});
});
Any advice would be greatly appreciated!
It's been a while since I've worked with requirejs but since no one smarter has chimed in yet I'm happy to help you keep troubleshooting. Using jQuery with requirejs can be tricky, especially with a large and complex platform like Magento.
Without being able to see all of your code I would consider and investigate the following:
Are you initializing jQuery properly in a no-conflict way if necessary
Are you using require() vs. define() where and as intended
Are you versed in the challenges unique to Magento when using requirejs
Have you reviewed and followed the recommendations regarding the complexities of using moment with requirejs
Here is some corresponding reading on each:
On No-Conflict
require() vs define() plus other good insights
On Magento 2 with RequireJS
On complexities of Moment and RequireJS
https://momentjs.com/docs/#/use-it/require-js/
https://github.com/requirejs/requirejs/issues/1554#issuecomment-226269905
One last thing to try:
In your final code example you pass moment to the function but not jQuery. Have you tried something along these lines:
require(['jquery', 'momentjs', 'shippingtime'], function($, moment) {
$(document).ready(function() {
$('.shipping-time').shipTime();
});
});
Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?
mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!
You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.
I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }
I'm trying to write a unit test for old jQuery plugin. I am kind of new in modern Javascript environment. I have tried creating unit test for React that uses browserify for deploying in production.
The legacy jQuery plugin file is like below
(function($) {
$.fn.myLegacyPlugin = function() {
alert('Hello World!');
};
})(jQuery);
This file will be uploaded to S3 and accessed via CDN. The jQuery will be included in normal browser head tag.
The test file is like below.
let expect = require('chai').expect;
let path = require('path');
let $ = require('jquery');
require('../src/plugin.js');
describe('plugin', () => {
it('should return okay', () => {
expect(true).to.be.true; //TODO
});
});
The problem is that when I tried executing the test, the runner displays jQuery is not defined. Without modifying the legacy jQuery plugin, how do I test the plugin?
The code is here https://github.com/petrabarus/js-test-jquery-legacy
After trying few possibilities, instead of using module import, I can just use read file and evaluate the script content.
Only change
require('../src/plugin.js');
to this
eval(fs.readFileSync(path.join(__dirname, '../src') + '/plugin.js', 'utf8'));
This way I don't have to modify the legacy file.
It might be that you are requiring jquery as "$" and passing it to plugin as "jQuery". Although jquery should be defined with both names, regardless.
Could you try requiring jquery like so:
let jQuery= require('jquery');
Answer 2:
actually, if your code (plugin) depends on jquery, your plugin.js should require jquery before loading..
so change plugin.js to
let $ = require('jquery');
// rest of plugin code...
I tried to require materialize in Vue and Laravel
in bootstrap.js I have
window.Materialize = require('materialize-css');
in App.vue component I have
mounted(){
Materialize.toast('I am a toast!', 4000)
}
and received
"Uncaught ReferenceError: Materialize is not defined"
message.
Either drop a script tag with materialize js or, make sure jquery is loaded before requiring materialize.
I suppose you have a browserify setup and if you do you can do something like that:
require('jquery')(window);
require('materialize-css')(window);
Or something like that:
global.jQuery = require('jquery')
global.Materialize = require('materialize-css')
Or import globally jQuery only then simply var Materialize=require('materialize-css') and use the variabile instead.
For webpack setups add a plugin for the stuff you have installed via npm and need globally:
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery:'jquery',
jquery:'jquery'
}),
],