I maybe doing something obviously wrong here, this is the code i have and i keep getting an error saying _Packery is undefined and i presume that is because it is loading before jQuery.
I have looked at the docs but i couldn't see why it isn't working correctly.
require.config({
urlArgs: "ts="+new Date().getTime(), // disable caching - remove in production
paths: {
jquery: [
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
"libs/jquery-191"
],
packery: [
"plugins/packery"
]
},
shim: {
'packery': ['jquery']
}
});
require(['jquery', 'packery'], function($) {
var container = $('#container');
container.packery({
itemSelector: '.item',
gutter: 10
});
});
Any help that allows me to understand what i have done wrong would be appreciated.
Thanks
I think u should define a shim like this:
shim: {
'packery': {
deps: ['jquery'],
}, ...
Then try to export packery like so...
require(['jquery', 'packery'], function($, packery) {
var container = $('#container');
container.packery({
itemSelector: '.item',
gutter: 10
});
});
From official documentation: jQuery is not required to use Packery. But if you do enjoy jQuery, Packery works with it as a jQuery plugin.
Packery currently does not support AMD / Require JS. See https://github.com/metafizzy/packery/issues/20 However, this issue is in development and will be resolved in the future.
Related
I was trying to use jquery ui in a sharepoint project and since the jquery is already loaded I don't see the reason of requiring it again when I need the accordion from jquery ui.
I already followed all the steps and added the folders to work with require js. as in:
https://learn.jquery.com/jquery-ui/environments/amd/
but I still get the same error:
Script error for "jquery", needed by: jqueryui/widgets/accordion, jqueryui/version, jqueryui/keycode, jqueryui/unique-id, jqueryui/widget
here is my code:
function main() {
require({
paths: {
jqueryui: '/teams/sp-test-site/dist/jQuery/ui/1.12.1',
},
shim: {
deps: [ 'jquery', ],
},
}, [ 'jqueryui/widgets/accordion', ],
function (accordion) {
$('#accordion').accordion();
});
}
ExecuteOrDelayUntilScriptLoaded(function () {
SP.SOD.executeFunc('require.js', null, main);
}, 'core.js');
So I assume I am missing some init function to use the already loaded jquery from the globals, I am just not sure how, if it is the case. Does any body know what could be wrong here?
defining jquery and returning the global one solved.
define('jquery', [], function () {
return window.jQuery;
});
I'm trying to load textext.js jquery plugin, with one of it's plugins, textext tags. On my project, I'm using require.js in order to load all scripts with it's dependencies.
As used for other scripts, I'm using a shim config on my main.js file:
main.js
require.config({
shin: {
jquery: {
exports: '$'
},
'textext': {
deps: ['jquery'],
exports: '$.fn.textext'
},
'textext_tags': {
deps: ['jquery', 'textext'],
}
},
paths: {
jquery: 'lib/jquery-min',
textext: 'lib/textext/textext.core',
textext_tags: 'lib/textext/textext.plugin.tags',
}
});
On the page that I use it, I call it as above:
file-app.js
define([
'jquery',
'textext',
'textext_tags',
], function($, Textext, TextextTags) {
// do stuff
});
The code is loading and working correctly on firefox, but on Chromium, sometimes (about 2/3 of the times), at the first time that I load the page, I've receive the following error, that broke the functioning of the page:
TypeError: Cannot set property 'TextExtTags' of undefined
#3 localhost/js/lib/textext/textext.plugin.tags.js:23:27
Inside the file textext.plugins.tags.js, we have at line 23 (the failure line):
$.fn.textext.TextExtTags = TextExtTags;
So, inspecting it with Firebug, I realize that Jquery is not loaded, so $ and $.fn is undefined.
My question is: why this schema of require.js is working with other jQuery plugins on the same project (like jquery cookie and others), but not with this, a jquery plugin with it's subplugins?
As Vishwanath said, only changing from "shin" to "shim" worked, like above:
require.config({
shim: {
jquery: {
exports: '$'
},
...
Thanks!
First question so please be nice!
I've been able to get Isotope working fine, but as soon as I try to use RequireJS to load it alongside jQuery, I can't seem to get it to work.
It's definitely loading the files because I can see them in the head of the dev toolbar, so the paths are fine. I'm stumped about what isotopePkg does, he even says it's undefined (???)
this is what my app.js looks like...
requirejs.config({
paths: {
'jquery' : ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
'jquery-1.10.2.min'],
'isotope' : 'isotope.min'
},
shim: {
'isotope' : ['jquery']
}
});
require(['jquery', 'isotope'], function(jQuery, Isotope) {
jQuery('#container').isotope({
itemSelector: '.element'
});
});
Does anyone have a working example of what this code should look like, or have any ideas about where I'm going wrong here?
I encountered the same issue where requiring the isotope package on live environment was requesting for other modules. Please see the code below and link isotope documentation for further instruction on how to implement isotope with requirejs.
I realize that answer is late but hopefully this might help anyone who come across this issue as well.
// require the require function
requirejs( [ 'require', 'jquery', 'path/to/isotope.pkgd.js' ],
function( require, $, Isotope ) {
// require jquery-bridget, it's included in isotope.pkgd.js
require( [ 'jquery-bridget/jquery.bridget' ],
function() {
// make Isotope a jQuery plugin
$.bridget( 'isotope', Isotope );
// now you can use $().isotope()
$('#container').isotope({...});
}
);
});
So I'm working with jquery.flot and jquery.flot.selection and since define({... loads modules asynchronously I am having a problem because the selection plugin is trying to push itself into $.plot.plugins (which is created by jquery.flot) but at that moment $.plot.plugins still isn't defined.
I found that the "shim" argument in require.config should help me with this but I am having no luck...
so here's the rundown...
jquery.flot creates $.plot
and jquery.flot.selection adds itself to $.plot.plugins
what I've tried...
shim:{
'js/lib/jquery.flot':{
exports:'$.plot'
},
'js/lib/jquery.flot.selection':{
deps:['js/lib/jquery.flot']
}
}
also
shim:{
'js/lib/jquery.flot.selection':['js/lib/jquery.flot']
}
my plugin looks like this..
define(['jquery','lib/jquery.flot','lib/jquery.flot.selection'], function() {
(function($) {
// jQuery plugin definition
.....
I also tried
define(['jquery'],function(){
require[('js/lib/jquery.flot.selection'],function(){
//jQuery plugin definition
...
What should I do???
For anyone who happens to run into this in the future, RequireJS can be a little opaque when it comes to diagnosing problems. Here's a working example of RequireJS 2 with jquery.flot and jquery.flot.selection, without the use module.
It's a little hard to tell what's different between this example and the question above, thus the opaqueness!
require.config({
shim: {
'jquery': {
exports: '$'
},
'jquery.flot': {
deps: ['jquery'],
exports: '$.plot'
},
'jquery.flot.selection': {
deps: ['jquery.flot']
}
},
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
'jquery.flot': '//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min',
'jquery.flot.selection': 'https://raw.github.com/flot/flot/master/jquery.flot.selection'
}
});
require(['jquery', 'jquery.flot', 'jquery.flot.selection'], function ($) {
// jQuery plugin definition
console.log($.plot);
$('#x').text($.plot.plugins);
});
I am totally new to RequireJS so I'm still trying to find my way around it. I had a project that was working perfectly fine, then I decided to use RequireJS so I messed it up :)
With that out of the way, I have a few questions about RequireJS and how it figures out everything. I have the file hierarchy inside the scripts folder:
I have the following line inside my _Layout.cshtml file:
<script data-main="#Url.Content("~/Scripts/bootstrap.js")" src="#Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>
And here's my bootstrap.js file:
require.config({
shim: {
'jQuery': {
exports: 'jQuery'
},
'Knockout': {
exports: 'ko'
},
'Sammy': {
exports: 'Sammy'
},
'MD': {
exports: 'MD'
}
},
paths: {
'jQuery': 'jquery-1.8.1.min.js',
'Knockout': 'knockout-2.1.0.js',
'Sammy': 'sammy/sammy.js',
'MD': 'metro/md.core.js',
'pubsub': 'utils/jquery.pubsub.js',
'waitHandle': 'utils/bsynchro.jquery.utils.js',
'viewModelBase': 'app/metro.core.js',
'bindingHandlers': 'app/bindingHandlers.js',
'groupingViewModel': 'app/grouping-page.js',
'pagingViewModel': 'app/paging-page.js'
}
});
require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
BindingHandlers.init();
$(window).resize(function () {
waitHandle.waitForFinalEvent(function () {
MD.UI.recalculateAll();
}, 500, "WINDOW_RESIZING");
});
var viewModelBase = Object.create(ViewModelBase);
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
BindingHandlers.init();
var viewModelBase = new ViewModelBase();
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
Then I implemented my modules by using the define function. An example is the pubsub module:
define(['jQuery'], function ($) {
var
publish = function(eventName) {
//implementation
},
subscribe = function(eventName, fn) {
//implementation
}
return {
publish: publish,
subscribe: subscribe
}
});
I've basically done the same thing to all of my javascript files. Note that the actual file containing the pubsub module is jquery.pubsub.js inside the /Scripts/utils folder. This is also the case with other modules as well.
UPDATE:
Ok I updated my bootstrap file now that I think I understand what a shim is and why I should be using it. But it's still not working for me, although I've also declared all the paths that I think would've caused me trouble in getting them right. The thing is that it's not even going into my require callback inside the bootstrap file, so I guess I still have a problem in the way I'm configuring or defining my modules?
Well, for one, if you are going to use a non-amd library, say jQuery, with require and have the jQuery function passed to the callback, you need to specify a shim with exports in your require config, like so:
require.config({
shim: {
jQuery: {
exports: '$'
}
},
paths: {
jQuery: 'jquery-1.8.1.min.js',
}
});
Other than that I'm not sure I understand what your issue is exactly.
If you are using ASP.NET MVC take a look at RequireJS for .NET
The RequireJS for .NET project smoothly integrates the RequireJS framework with ASP.NET MVC on the server side using xml configuration files, action filter attributes, a base controller for inheritance and helper classes.
I did not completely understand what the problem is. But if it relates to JS libraries to be loaded with require.js then this boot file works for me:
require.config({
paths: {
"jquery": "/scripts/jquery-1.8.2",
"sammy": "/scripts/sammy-0.7.1"
},
shim: {
"sammy": {
deps: ["jquery"],
exports: "Sammy"
}
}
});
require(["jquery", "sammy"], function ($) {
$(document).ready(function () {
alert("DOM ready");
});
});
Please, note, there is no '.js' in paths.
BTW, if you use MVC 4, you don't need #Url.Content in 'href' and 'src' any more.