require using AMD pattern gives error for jQuery UI events

8
votes

In my code test.js is dependent on jquery-ui which does not uses require AMD pattern and test.spec.js dependent on jquery-ui, test.js which uses AMD pattern. Can we load dependency of jquery-ui in test.js dynamically when running test.spec.js.

require.config({

    baseUrl: '/demo',

    paths: {
        'jquery': '../library/jquery-1.11.1',
        'jquery-ui': '../library/jquery-ui-1.11.4'
    },
    shim: {
        'jquery': {
            exports: 'jQuery'
        },
        'jquery-ui': {
            deps: ['jquery']
        },
        'library/src/js/test': {
            deps: ['library/jquery-1.11.1', 'library/jquery-ui-1.11.4', '../js/collapse'],
            exports: 'Test'
        }
    },
    callback: window.__karma__.start
});

In test.js "draggable" of jquery-ui draggable event is written. after evaluating $('#panelId').draggable({revert: true}); got error

"TypeError: 'undefined' is not a function (evaluating '$('#panelId').draggable({revert: true})')"

How to load jquery-ui for test.js in require.config. As i am using this to run my jasmine test cases. In real environment it is working as expected, but in jasmine test case not able to find jquery-ui event. test.js is not using require.js, but test.spec.js uses the require AMD pattern.

in test.spec.js code after executing this got error of jquery-ui draggable undefined

define(['jquery-ui','library/src/js/test'], function ($) {

});

I am able to access jquery ui in test.spec.js using $, not in test.js where jquery-ui event is written as test.js does not uses AMD require pattern. Don't know what is missing. any help will be appriciated... :)

2
javascriptjquery-uirequirejsjasmineamd
Can u create jsfiddle with your code? - venkat7668
@venkat7668 in library/src/js/test i am using jquery-ui reference which does not uses require.js, while loading dependecy it execute library/src/js/test file and throws jquery-ui event undefined error. - Rahul Rajput
So you mean that library/src/js/test.js is not an AMD module? - tonyjmnz
@tonyjmnz Yes it is not using AMD - Rahul Rajput

2 Answers

3
votes

Try this updated require js config

Use "library/src/js/test" to load your test

require.config({

    baseUrl: '/demo',

    paths: {

        'jquery': '../library/jquery-1.11.1', // assuming this is a correct path
        'jquery-ui': '../library/jquery-ui-1.11.4'  // assuming this is a correct path
    },
    shim: {
        'jquery': {
            exports: 'jQuery'
        },
        'jquery-ui': {
            deps: ['jquery']
        },
        'library/src/js/test': {
            deps: ['jquery', 'jquery-ui', '../js/collapse'], // changes done here
            exports: 'Test'
        }
    },
    callback: window.__karma__.start
});
0
votes

You need to use jquery-ui instead of the path to your file.

shim:{
     'jquery': {
            exports: 'jQuery'
          },
     'jquery-ui': {
            deps: ['jquery']
        }
}

define(['jquery-ui','library/src/js/test'], function ($, test) {
    //code goes here
});