i am trying to use requirejs jquery and jquery ui.want to avoid global variable $ and jquery i write a script for loading jquery ui
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '{!URLFOR($Resource.Prototype)}'+'/js',
paths: {
jquery : 'jquery-1.7.2.min',
jqueryui : 'jquery-ui-1.10.4.custom.min',
jquerymobile : 'jquery.mobile-1.4.2.min',
jquerytouchpunch : 'jquery.ui.touch-punch'},
map: {
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'jqueryui': {
exports: "$",
deps: ['jquery']
},
'jquerytouchpunch' : {
exports: "$",
deps: ['jquery','jqueryui','jquerymobile']
}
}});
jquery-private.js
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
and i tried to use jqueryui in my module
define(['jqueryui','ModuleData','DataFormatterUtility'],function($,ModuleData,d){
return {
RetrieveAndAppendContacts : function(unlinkedContacts){
var contactsHtml = "";
console.log('$ is');
console.log($);
$.each(unlinkedContacts,function(i,obj){
contactsHtml += d.ContactDataFormatter(obj);
});
$(".contact-wrapper .inner").empty().append(contactsHtml);
}
});
i am getting error in console
Uncaught TypeError: Cannot read property 'ui' of undefined jquery-ui-1.10.4.custom.min.js:6
Uncaught TypeError: Cannot read property 'support' of undefined jquery.ui.touch-punch.js:14
$ is ContactModule.js:5
undefined
can anyone please explain how to use jqueryui in this scenario.Thanks :)