I use jquery-ui-timepicker-addon on my page and I get this error:
TypeError: $.widget.extend is not a function on this.options =
$.widget.extend( {}, jquery-ui.js (line 579, col 17)
I create the control using:
$("input.dateInfo").datetimepicker()
and here I don't get any error. The error appears when I click the control (the input field). Instead of showing the datetime picker, I got the error above.
Any explanation for this error?
I use require.js to load the javascript libraries. I have more js files that load. If is any conflict, with some other jquery plugin, how do I know where is the conflict?
Later edit:
I load the libraries using require.js
paths: {
jquery: 'jquery/jquery.min',
jquery_ui: 'jquery-ui-1.11.2.custom/jquery-ui',
jquery_ui_widget: 'jquery-picklist/jquery.ui.widget',
jquery_ui_timepicker: 'jquery-ui-1.11.2.custom/jquery-ui-timepicker-addon',
bootstrap: 'bootstrap-3.0.0/js/bootstrap.min',
bootbox:'bootstrap-3.0.0/plugins/bootbox.min',
moment: 'moment/moment',
//bootstrap_dateTime_picker: "bootstrap-dateTimePicker/bootstrap-datetimepicker",
sugar: 'sugar/sugar-1.3.6.min'
// some more lines here
}
and
shim: {
"jquery": ["sugar"],
"slim_scroll": ["jquery"],
"jquery_ui": ["jquery"],
"jquery_ui_widget": ["jquery","jquery_ui"],
"jquery_ui_timepicker": ["jquery", "jquery_ui"],
"bootstrap": ["jquery_ui"],
"less": ["jquery"],
"sugar_loaded": ["jquery","sugar"]
// some more lines here
}
Possible duplicate of jquery-ui-typeerror-e-widget-extend-is-not-a-function
Check your sequence of script loading.
<script src="/scripts/jquery.js">
<script src="/scripts/jquery-ui.js">
<script src="/scripts/other-widgets.js">
EDIT:
In your edit you mentioned that your are using require.js. With require.js you need to mention dependencies of modules to manage the load sequence else every script will be loaded asynchronously.
Now, the problem zeros down to, that one of your script depends on jquery_ui_widget but you missed to mention it as dependency:
shim: {
"jquery": ["sugar"],
"slim_scroll": ["jquery"],
"jquery_ui": ["jquery"],
"jquery_ui_widget": ["jquery","jquery_ui"],
"jquery_ui_timepicker": ["jquery", "jquery_ui"],
"bootstrap": ["jquery_ui"],
"less": ["jquery"],
"sugar_loaded": ["jquery","sugar"]
// some more lines here
}
Here, I am about which script depends on jquery_ui_widget but my guess would be slim_scroll or jquery_ui_timepicker or bootstrap.
After adding and removing from the list of external js files I found that the conflict was with: jquery_ui_widget: 'jquery-picklist/jquery.ui.widget'. I removed this js file (I was luck that was a component that was no longer in use) and everything start working normally!
Thanks anyone for trying to help me. I think that this is a issue specific to my particular project that uses about 20 external js libraries, and one of them caused the conflict.
Related
This question already has answers here:
Mismatched anonymous define() module
(8 answers)
Closed 5 years ago.
Let's say I have 2 files: test1.ts and test2.ts. This is the content of test1:
export const x = 1
This is the content of test1:
import { x } from './test2'
alert(x);
When I run the application, I get this error: Uncaught ReferenceError: exports is not defined at test1.js:2.
According to other posts, this error is caused by the fact that web browsers don't support export, and require(...). To solve it, one of the solution would be to use something like RequireJs.
So I've done some readings. This article has been the easiest for me to understand.
I've added this line in the _Layout.cshtml file.
<script src="~/Scripts/require.js"></script>
Create a config file.
requirejs.config({
baseUrl: '/Scripts/js'
});
I've put test1 and test2 in the /Scripts/js folder.
Run the application, but still get the same error: Uncaught ReferenceError: exports is not defined at test1.js:2.
How to fix the error using RequireJs?
Thanks for helping.
EDIT
The solution doesn't have to be RequireJs but anything the fix the problem. There are so many great tutorial on typescript, but they all assume that people are using node or angularjs. All I need is to add some typescript to my asp.net mvc app. As long it was one file, things were fine. Now I'd like to re-use some of the code, thus I organized them in different files. Unfortunately, I can't move forward because of that error. I've been sitting there for 3 days now.
EDIT 2
I've added commonJs to amd as you suggested by #artem,
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
}
now I'm getting this error.
Uncaught Error: Mismatched anonymous define()
module: function (require, exports, CommonTypes_1) {
//...
It seems like this question is dealing with the same issue. Should I put this code in a new file?
I know this is a little old, but just ran into this problem. Here's how I solved it.
This post was very helpful: https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project
First, add require.js to your BundleConfig.cs. Mine looks like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/require.js"));
Next, make sure _Layout.cshtml renders "scripts" section after your bundles. Mine looks like this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Then in your view, render the scripts section like below. My Index.cshtml looks like this:
#section scripts
{
<script>
require(["Scripts/Init"],
function (Init) {
Init.Start();
}
);
</script>
}
My ~/Scripts/Init.ts file looks like this:
import * as DataBind from "./DataBind"
export function Start() {
DataBind.SetAllDatabinds(null);
}
From there, you can load in all your modules as needed. The important thing I found is to not have any "loose code" in your TypeScript files (i.e. the "alert(x)" in the example). Everything should be exported.
I've got an Aurelia project based on the jspm skeleton. I'm using both toastr and this datepicker custom attribute https://www.danyow.net/jquery-ui-datepicker-with-aurelia/.
Each works individually. However, when I include both in my project I get the following error:
datePicker.js:12 Uncaught (in promise) TypeError: $(...).datepicker is not a function
Any ideas on how to get these to work together?
As Miroslav indicated above, the error resulted from conflicting jquery dependencies in my config.js file. Some references were to npm and some were to github. In my case, I changed all to reference github.
I changed references from:
"jquery": "npm:jquery#3.1.1"
to
"jquery": >"github:components/jquery#3.1.1"
Bower and main-bower-files are fantastic, however, when using them with Angular Bootstrap UI, more things are installed/included than required.
Basically : Angular Bootstrap UI, replaces the need for bootstrap.js and it's jquery dependency. However when installing bootstrap, jquery gets installed, then my gulp task which uses main-bower-files, includes jquery and bootstrap.js in my html files.
Is there a way to tell bower, and/or main-bower-files and/or Bootstrap, that jquery and bootstrap.js are not required anymore.
So far I tried commenting the jquery dependency and dist/js/bootstrap.js lines in bower_components/bootstrap/bower.json, but the files are still being included.
1) Switch to wiredep, which I'd recommend. Then you can do something like this:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap']
}))
.pipe(gulp.dest('app'))
});
Note that the above will remove the whole bootstrap, not just its .js files. The exclude array can contain also regexps, which is what is probably needed if you want to retain for instance styles.
And in your HTML file (for javascript):
Replace the js with css where you want to inject styles.
2) Override the bower main files for Bootstrap: provide the following options to main-bower-files:
{
"overrides": {
"bootstrap": {
"main": [
// files you want to include
]
}
}
}
You'll have to check what you don't want to exclude and add them to the main array above.
See also: https://github.com/ck86/gulp-bower-files/issues/33
I am having a problem building an application that includes TableTools. I am using r.js and the build line is
E:\Software\nodejs\node r.js -o build.js
The build.js is
({
baseUrl: ".",
paths: {
'jquery' : 'jquery-1.9.1',
'jquery-ui' : 'jquery-ui-1.10.3.custom',
'jquery.dataTables': 'jquery.dataTables',
'jquery.tableTools' : 'TableTools'
},
name: "build_main",
out: "external.min.js",
optimize: "none"
})
Note that I have flattened all of the directories to make it easier to investigate.
When I load my test application, I get the message
Warning: TableTools 2 requires DataTables 1.9.0 or newer ...
I am pretty sure that DataTables is correctly specified in the build. It would seem that when the check in the TableTools code is done DataTables doesn't seem to have been fully loaded/initialised. If I put a break point at the line
if ( typeof $.fn.dataTable == "function" &&
in external.min.js and then step through, it won't popup the warning. Datatables looks to have been correctly initialised just by putting in a breakpoint and stepping through. If I remove TableTools then everything loads fine - DataTables is there.
This can happen due to several reason as mentioned below,
You are using previous versions of Data-tables.
Not mentioning data tables in the build.
Older browser version or browser not supporting data-tables.
Slow internet.
I want to include jQueryUI in my backbone.js app using RequireJS. The main.js file included in my index.html is as follows:
require.config({
paths: {
jquery: 'libs/jquery/jquery-1.7.2.min',
jqueryui: 'libs/jquery/jquery-ui-1.8.18.custom.min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-optamd3-min',
text: 'libs/require/text',
templates: 'templates'
}
});
require(['app'], function(App){
App.start();
});
And for each model/view/router file, I just include the 'jquery' namespace at the start of the "define" block as follows:
define([
'jquery',
'underscore',
'backbone',
'views/categoryview',
'text!templates/category.html'
], function($, _, Backbone, CategoryView, categoryTemplate){
// Here comes my code
});
But the jQueryUI could not be used in these files. Is there something wrong with my code? Or should I also include the "jqueryui" in each "define" block? But if I include "jqueryui" in the "define" block, How should I name it in the function to avoid name conflict with jquery?
While kujakettu's answer is at least partially correct I also had to specify jQuery as a dependancy in my shim to be sure jQuery was loaded before jQuery-UI.
e.g.
require.config({
baseUrl: 'scripts/modules',
paths:{
jquery:'../libs/jquery',
jqueryUI:"../libs/jquery-ui",
underscore:'../libs/underscore',
backbone:'../libs/backbone'
},
shim: {
jqueryUI: {
deps: ['jquery']
},
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
waitSeconds: 15
}
});
Quite old post. There's a tool available to convert jquery ui files to AMD version, created by jrburke. Hope it would be useful!
You can include all files that only patch some other object (like jQuery UI) in your main file as follows (you need to make sure jQuery is loaded before jQuery UI):
require(['jquery', 'app', 'jqueryui'], function ($, App) { App.start(); });
Another approach is to include jQuery UI in every module as you already mentioned.
I personally prefer first approach even though it's hiding dependencies.
The other answers are a bit outdated now. JQuery UI comes with AMD support. If you want the whole project just use bower install jquery-ui and then add it to paths. No shim needed.
If you want to load a subset of jQuery UI that you need in your app (while not loading extra bloat) then just use bower install jquery-ui to get the whole thing then use RequireJS build tool called r.js to create an AMD package of exactly the files you need.