CODEWITHSUNDEEP
jquery-uidatetimepicker
Zelter Ady
Zelter Ady

Reputation: 6348

JQuery time picker add-on error

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
    }

Upvotes: 0

Views: 1057

Answers (2)

Zelter Ady
Zelter Ady

Reputation: 6348

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.

Upvotes: 0

Dev Naruka
Dev Naruka

Reputation: 338

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.

Upvotes: 1

Related Questions