{"id":3178,"date":"2014-03-19T11:18:44","date_gmt":"2014-03-19T11:18:44","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/19\/requirejs-with-jquery-masonry-imagesloaded-object-object-object-has-no-method-imagesloaded-collection-of-common-programming-errors\/"},"modified":"2014-03-19T11:18:44","modified_gmt":"2014-03-19T11:18:44","slug":"requirejs-with-jquery-masonry-imagesloaded-object-object-object-has-no-method-imagesloaded-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/19\/requirejs-with-jquery-masonry-imagesloaded-object-object-object-has-no-method-imagesloaded-collection-of-common-programming-errors\/","title":{"rendered":"requireJS with JQuery, Masonry, & ImagesLoaded: Object [object Object] has no method 'imagesLoaded'-Collection of common programming errors"},"content":{"rendered":"

RequireJS newbie here. Trying to convert some JQuery code I had working fine in the old way to work w\/ RequireJS.<\/p>\n

Header of my page loads three JS files via script tags — require.js itself, my require.cfg.js, and boot\/main.js with the site-specific functionality.<\/p>\n

Relevant require.cfg.js excerpt:<\/p>\n

,paths: {\n    'boot': 'src\/boot'\n    ,'jquery': 'lib\/jquery.min'\n    ,'jquery.masonry': 'lib\/plugins\/masonry.pkgd.min'\n    ,'jquery.imagesloaded': 'lib\/plugins\/imagesloaded.pkgd.min'\n}\n\n,shim: {\n    'jquery': {\n        exports: 'jQuery'\n    }\n    ,'jquery.masonry': ['jquery']\n    ,'jquery.imagesloaded': ['jquery']\n}\n<\/code><\/pre>\n
boot\/main.js:<\/p>\n
require([\n'jquery',\n'jquery.masonry',\n'jquery.imagesloaded',\n], function($) {\n\n    \/\/ The following code worked just fine when I included it in the header of the page as-is\n$(function() {\n\n    var $container = $('#container');\n    \/\/ This doesn't work\n    $container.imagesLoaded(function() {\n                    \/\/ Neither does this\n            $('#container').masonry({itemSelector : '.item',});\n        });\n\n});\n\n});\n<\/code><\/pre>\n
I can confirm that all of these JS files are being found and loaded by the browser. And I confirm that if I do:<\/p>\n
require([\n'jquery',\n'jquery.masonry',\n'jquery.imagesloaded',\n], function($, Masonry, ImagesLoad) {\n<\/code><\/pre>\n
the Masonry and ImagesLoaded variables are set correctly…. but I don’t want to proceed w\/o jQuery<\/p>\n
But when I try to call .imagesLoaded() and .masonry() on the JQuery container object, I get:<\/p>\n
Uncaught TypeError: Object [object Object] has no method ‘imagesLoaded’<\/strong><\/p>\n
And if I comment out the imagesLoaded line, I get:<\/p>\n
Uncaught TypeError: Object [object Object] has no method ‘masonry’<\/strong><\/p>\n
Not sure what I’m doing wrong here…? From what I’ve read in other StackOverflow questions, the code looks correct to me…?<\/p>\n
Thanks!<\/p>\n
Update:<\/strong><\/p>\n
If I use this code the non-JQuery way like so, it works:<\/p>\n
        var container = document.querySelector('#container');\n        imagesLoaded(container, function() {\n            var msnry = new Masonry( container, {\n                itemSelector: '.item',\n            });\n        });\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
RequireJS newbie here. Trying to convert some JQuery code I had working fine in the old way to work w\/ RequireJS. Header of my page loads three JS files via script tags — require.js itself, my require.cfg.js, and boot\/main.js with the site-specific functionality. Relevant require.cfg.js excerpt: ,paths: { ‘boot’: ‘src\/boot’ ,’jquery’: ‘lib\/jquery.min’ ,’jquery.masonry’: ‘lib\/plugins\/masonry.pkgd.min’ ,’jquery.imagesloaded’: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3178","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3178"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3178\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}