-2

I am new working with requirejs, I have an old Asp.net Webform application that I am trying to apply some javascript module loading using requirejs. In this app I am using a jquery plugin named Time Entry, but is not working if I use requirejs, only works if I added the reference the old way. Here is my requirejs configuration and declaration. In the aspx file:

<script src="../../scripts/require.js"></script>
<script>
    require(["../../app/shared/require.config"],
        function (config) {
            require(["appIncidentTracking/incident-type-init"]);
        });

</script>

My require.config file is like this:

    require.config({
    baseUrl: '../../scripts',
    paths: {
        app: '../../app/utilization-management',
        appIncidentTracking: '../../app/incident-tracking',
        jquery: 'jquery-3.1.1.min',
        jqueryui: 'jquery-ui-1.12.1.min',
        jqueryplugin: '../../js/jquery.plugin.min',
        timeentry:'../../js/jquery.timeentry.min',
        handlebars: 'handlebars.amd.min',
        text: 'text',
        moment: 'moment.min',
        datatable: 'DataTables/jquery.dataTables.min',
        blockUI: 'jquery.blockUI.min',
        shared: '../../app/shared',
        bootstrap: 'bootstrap.min',
        'bootstrap-datepicker': 'bootstrap-datepicker.min',
        'bootstrap-multiselect': '../js/bootstrap-multiselect/bootstrap-multiselect'
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        },
        'bootstrap-multiselect': {
            deps: ['bootstrap']
        },
        timeentry: {
            deps:['jquery', 'jqueryplugin']
        }
    }
});

and in my incident-type-init.js I only call the plugin:

/**
 * Incident Type Init page 
 * @module incident-type-init
 */
define(function (require) {
    var $ = require('jquery'),
        jqueryplugin = require('jqueryplugin'),
        timeentry = require('timeentry'),
        bootstrap = require('bootstrap');

    /**
     * Jquery ready function
     */
    $(function () {
        $('.js-timeentry').timeEntry();
    });
});

but when the application runs I got this error: $.JQPlugin.createPlugin is not a function, it is like does not find the jquery.plugin.js

I checked the network tab in chrome and both files are loaded, jquery.plugin.js and jquery.timeentry.js

UPDATE: In our application, we are using Asp.net MasterPages, and there we are loading an old jquery version, 1.5.1, and I use that MasterPage in my page, but when I check the network tab in chrome, is loading the MasterPage scripts first,then all the requirejs stuff.

and the funniest part is that sometimes work, sometimes not.

Any clue?

ddieppa
  • 5,866
  • 7
  • 30
  • 40

2 Answers2

0

The module jqueryplugin needs to have jQuery already loaded for it. It is not an AMD module because it does not call define. So you need an additional entry in shim for it:

jqueryplugin: ["jquery"]

The above is short for:

jqueryplugin: {
    deps: ["jquery"]
}
Louis
  • 146,715
  • 28
  • 274
  • 320
  • I did that too, same results, but I think that is only to make sure that jquery is loaded before jqueryplugin kick in, and in my case I am doing that even though I didn't declare the dependency, well that's what I understand in my little experience – ddieppa Jan 11 '17 at 14:20
  • What I describe in my answer **definitely** is a problem in the configuration you show. There may be other things happening but I don't have a crystal ball that allows me to replicate your runtime. The only other issue I see that *could* be a factor (and this is just a guess) is if you load jQuery both in RequireJS and outside RequireJS. It is possible to do this, sometimes accidentally. If you *are* doing this, then you must *absolutely* indicate it in your question. Otherwise, the only thing I can say is "good luck in your future endeavors". – Louis Jan 11 '17 at 14:26
-1

I don't think your code is syntactically correct.

Try this:

1. Your script should refer to the require.config in data-main.

<script data-main="PATH_TO_CONFIG_FILE" src="../../scripts/require.js"></script>

2. Quotes are missing in paths of the config file. Instead it should be like this

require.config({
    baseUrl: '../../scripts',
    paths: {
        "app": '../../app/utilization-management',
        "appIncidentTracking": '../../app/incident-tracking',
        "jquery": 'jquery-3.1.1.min',
        "jqueryui": 'jquery-ui-1.12.1.min',
        "jqueryplugin": '../../js/jquery.plugin.min',
        "timeentry":'../../js/jquery.timeentry.min',
        "handlebars": 'handlebars.amd.min',
        "text": 'text',
        "moment": 'moment.min',
        "datatable": 'DataTables/jquery.dataTables.min',
        "blockUI": 'jquery.blockUI.min',
        "shared": '../../app/shared',
        "bootstrap": 'bootstrap.min',
        "bootstrap-datepicker": 'bootstrap-datepicker.min',
        "bootstrap-multiselect": '../js/bootstrap-multiselect/bootstrap-multiselect'
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
        "bootstrap-multiselect": {
            deps: ["bootstrap"]
        },
        "timeentry": {
            deps:["jquery", "jqueryplugin"],
            exports:"timeentry"
        }
    }
});

3. Since your module has dependencies, list them like this:

define(["jqueryplugin","timeentry","bootstrap"],function(jqueryplugin,timeentry,bootstrap) {

    $(function () {
        $('.js-timeentry').timeentry();
    });
});
Sandeep Nayak
  • 4,649
  • 1
  • 22
  • 33
  • 1
    This answer is incorrect. Let's go in reverse order. Number 3 is not necessary. The OP is using RequireJS's ["sugar syntax"](http://requirejs.org/docs/whyamd.html#sugar). Number 2 is not necessary either. This is basic JavaScript: keys in an object literal need quoting only if they are not valid identifiers. [See](http://stackoverflow.com/q/4348478/1906307). Number 1 is also not necessary. It is perfectly possible to load a configuration with nested `require` calls like the OP does. – Louis Jan 11 '17 at 09:18