I prefer to use the require, jQuery and jQueryUI as seperate scripts without modifying them.
I get the error: (inside jquery-ui.min.js:6)
Uncaught ReferenceError: jQuery is not defined
jQuery itself works and can be used, however jQuery-UI doesnt work.
How can I solve it without using require-jquery by just modying main.js
Here my current main.js
requirejs.config({
paths: {
'jquery': 'lib/jquery/jquery',
'jqueryui': 'lib/jquery-ui/jquery-ui.min'
},
shim: {
'jquery': {
exports: 'jQuery'
},
'jqueryui': {
deps: ['jquery']
}
}
});
require([
"jquery",
"jqueryui"], function(jQuery) {
});
I experimented with various things like the shim init function, which however is not even called before the exception happens.
Any ideas, or impossible?
Update: fixed the code above. Its working now!
The error is in your code, you wrote this
'jqueryui:': {
deps: ['jquery'],
}
do you notice the extra : . Remove it and then your code is working
Related
Recently I had to update our jquery version from 1.x to 3.5. With that I also had to update Jquery UI to 1.12. I used the opportunity to import our js dependencies as node_modules instead of just having a copy in our repository.
When running our WebApp within the IDE everything works fine and as expected. However, as soon as I build the .exe with pyInstaller (running a grunt task to minify everything into a single app.min.js), I get the error message "g.sortable is not a function". The same problem occurs with jquery.transit.
package.json:
{
"dependencies": {
// snip
"jquery": "3.5.1",
"jquery-ui": "1.12.1",
"jquery.iframe-transport": "1.0.0",
"jquery.transit": "0.9.12",
}
}
configuration.js:
require.config({
paths: {
// snip
'ui.sortable': '<...>/3rdparty/js/node_modules/angular-ui-sortable/dist/sortable',
'jquery': '<...>/3rdparty/js/node_modules/jquery/dist/jquery',
'jquery.transit': '<...>/3rdparty/js/node_modules/jquery.transit/jquery.transit',
'jquery-ui': '<...>/3rdparty/js/node_modules/jquery-ui-dist/jquery-ui',
}
})
Gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('<...>/3rdparty/js/package.json'),
requirejs: {
compile: {
options: {
baseUrl: '<...>/js',
mainConfigFile: '<...>/js/configuration.js',
optimize: 'none'
}
}
},
ts: { ... },
sass: { ... },
uglify: {
'js': {
files: [
{
expand: true,
src: [
'app/**/*.js',
'!app/**/3rdparty/**/*.js',
'!app/<...>/js/configuration.js',
'!app/<...>/js/patch.js'
]
}
],
options: {
compress: true,
mangle: false
}
}
}
});
};
Again, the javascript files seem to work together properly as there is no problem when I start the webservice in pycharm. It's only when I compile and minify everything that the jquery UI widgets stop working. Other external libraries for whose I started using npm work perfectly fine.
I am kinda clueless at this point.
So, the solution to my problem was to just
import 'jquery.transit';
import 'jquery.ui';
In one of my TypeScript files. Apparently in the whole project that never happened anywhere. It worked before my updates because the jqueryUI version we used had the AMD part of it commented out.
I try the last hours to integrate EasyAutocomplete into RAILS 6. But not so easy.
What I did :
Install Javascript Package with yarn:
# yarn add easy-autocomplete
Add this in the file app/javascript/packs/application.js
import “easy-autocomplete”
Add this in the file app/assets/stylesheets/application.css
*= require easy-autocomplete
*= require easy-autocomplete.themes
Then start the Rails Server and refresh the Web Page.
Then try to use it. Go into the developer console and type :
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
task_name_search_field was previously defined as id :
<input type="search" class="form-control" id="task_name_search_field">
I got this message:
TypeError: $(...).EasyAutocomplete is not a function
Any idea ?
I had the same problem. Turbolinks does not give access to the script, the code needs to be run after it is loaded, something like this:
document.addEventListener("turbolinks:load", function() {
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
});
In order for the autocomplete to work, you need to add a script file to the application.js like this:
require("packs/youfile")
If it helps you, here is an example of my code:
document.addEventListener("turbolinks:load", function() {
$input = $("[data-behavior='autocomplete']")
var options = {
getValue: "full_name",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "cameras",
header: "<strong>Cameras</strong>",
}
],
list: {
onChooseEvent: function() {
var url = $input.getSelectedItemData().url
$input.val("")
Turbolinks.visit(url)
}
}
}
$input.easyAutocomplete(options)});
I suppose you wouldn't have included jquery in your application.js. You need to do explicitly as it doesn't get included automatically with rails 6 app.
I ran into a similar issue. I'm a n00b at Webpacker, but by default it doesn't seem to compile in the same order in which plugins are included.
To get around the issue I did this workaround which just wraps the plugin code in an anonymous jQuery function, like so:
(function($) {
//Eac plugin code
})(jQuery);
https://github.com/pawelczak/EasyAutocomplete/issues/200#issuecomment-212277620
Maybe there is a way in the configs to force compilation in the correct order. This looks promising https://stackoverflow.com/a/43005332/148390
Add script-loader to package.json then add
import 'script-loader!jquery/dist/jquery.min'
in app/javascripts/application.js
Check in your browser that $().jquery yields a proper result.
Hello I am working on creating line charts using Highchart libraries. I need to generate line chart on time intervals like day, week,month, quarter, year etc. So found some examples which uses Highstocks from Highcharts. My project uses requirejs to include scripts. However I have some issues with the js library for highstock. I do not understand if I miss something. My code:
requirejs.config({
paths: {
jquery: "js/jquery/jquery",
"datatables.net": "js/datatables/js/jquery.dataTables.min",
"datatables.net-css": "js/datatables/css/jquery.dataTables.min",
tippy: "js/tippy.all.min",
fixedHeader: "js/datatables/js/dataTables.fixedHeader.min",
"fixedHeader-css":"js/datatables/css/fixedHeader.dataTables.min",
jquerymin: "js/jquery-1.10.2.min",
colpick: "js/colpick",
colpickcss: "css/colpick",
highstock: "js/highstock"
},
shim: {
"datatables.net": ["jquery", "css!datatables.net-css"],
fixedHeader: ["css!fixedHeader-css"],
colpick: ["css!colpickcss"]
}
});
require.config({
priority: ["jquery", "jquerymin", "colpick"]
});
require([
"jquery", "tippy", "DS/3DXHighcharts/3DXHighcharts", "highstock", "datatables.net", "fixedHeader", "jquerymin", "colpick"],
function(
$, tippy, Highcharts, highstock )
When i try to generate the chart:
Highcharts.stockChart('container',chartData);
I get error : Cannot read property 'stockChart' of undefined.
I am trying to do something like below :
https://jsfiddle.net/BlackLabel/smbc6gr4/
I'm trying to get working jQuery UI and prototype libraries together and finally arrived to this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script>
var jq = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="/js/jquery-ui.js"></script>
And call jQuery like so:
jQuery(function($){
$('#myid').[...]
});
or
jQuery('#myid').[...]
But now, I can't get rid of the following error (without calling anything):
Uncaught TypeError: proto.plugins[i].push is not a function
and comes from the jquery-ui.js file with this part:
$.ui.plugin = {
add: function( module, option, set ) {
var i,
proto = $.ui[ module ].prototype;
for ( i in set ) {
proto.plugins[ i ] = proto.plugins[ i ] || []; // Error fires here
proto.plugins[ i ].push( [ option, set[ i ] ] );
}
},
Is there a solution?
I ran into the same problem. The cause for me was my attempt to add a function to javascript's Object class.
In fact, simply extending javascript's Object is not supported at all by jQuery - and thereby its plugins.
This answer to the question of extending Object has a good solution which solved the problem with jQueryUI for me.
I copied the jQuery passthrough example from here http://angular-ui.github.com to this fiddle http://jsfiddle.net/ilyaD/Xe48t/3/ and it is not working. I am getting ui is not defined
this is the JS:
angular.module('ui.config', []).value('ui.config', {
// The ui-jq directive namespace
jq: {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
}
});
what did I miss?
UPADTE:
I added ui to angular.module('ui.config', ['ui']).value('ui.config', { but still not working http://jsfiddle.net/Xe48t/9/
Actually, you're not supposed to declare the value on the ui.config module. You declare it on your own app and it will take precedence:
angular.module('myApp', ['ui']).value('ui.config', {
jq: {
// whatever
}
});
Note that this is defined on myApp
It also helps if you:
run your JS in the right place (head)
have AngularJS initialize properly (using ng-app)
and load the bootstrap lib and css
http://jsfiddle.net/Xe48t/12/
Make sure you're including the AngularUI javascript file, and then you want to use the string "ui".
angular.module('ui.config', ['ui'])
You missed the ui dependency:
angular.module('ui.config', ['ui']).value('ui.config', {
http://jsfiddle.net/Xe48t/4/