Having an awful time with Semantic UI

help
1

Behaviours are not working for me. Basically, meteor does something funny with jquery so the solution is supposedly to use onRendered like such:

Template.myTemplateName.onRendered(function(){
  this.$(".dropdown").dropdown();
});

However, when I do this, meteor crashes. Has anyone else had this issue?

EDIT: I noticed meteor has jquery version 1.11.8 installed. That’s two versions behind the current RC. Perhaps this is what’s causing issues with semantic?

W20160524-01:07:17.660(-4)? (STDERR)          
W20160524-01:07:17.660(-4)? (STDERR) /Users/mattmacpherson/.meteor/packages/meteor-tool/.1.3.2_4.lbyo5v++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267
W20160524-01:07:17.660(-4)? (STDERR) 						throw(ex);
W20160524-01:07:17.660(-4)? (STDERR) 						      ^
W20160524-01:07:17.668(-4)? (STDERR) ReferenceError: Template is not defined
W20160524-01:07:17.668(-4)? (STDERR)     at meteorInstall.test.testingJS.js (test/testingJS.js:3:1)
W20160524-01:07:17.668(-4)? (STDERR)     at fileEvaluate (packages/modules-runtime/.npm/package/node_modules/install/install.js:141:1)
W20160524-01:07:17.668(-4)? (STDERR)     at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:75:1)
W20160524-01:07:17.669(-4)? (STDERR)     at /Users/mattmacpherson/Code/edabit/.meteor/local/build/programs/server/app/app.js:102:1
W20160524-01:07:17.669(-4)? (STDERR)     at /Users/mattmacpherson/Code/edabit/.meteor/local/build/programs/server/boot.js:283:10
W20160524-01:07:17.669(-4)? (STDERR)     at Array.forEach (native)
W20160524-01:07:17.669(-4)? (STDERR)     at Function._.each._.forEach (/Users/mattmacpherson/.meteor/packages/meteor-tool/.1.3.2_4.lbyo5v++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20160524-01:07:17.669(-4)? (STDERR)     at /Users/mattmacpherson/Code/edabit/.meteor/local/build/programs/server/boot.js:133:5
2

Does the template render without the jQuery line or do you get this same error?
I never used this.$ in an onRendered, try just $(".dropdown").dropdown();

3

The error is not in the code that is shown. I have the same in multiple locations in my code and it works

Template.date_picker.onRendered(function () {
  const dropdown = this.$('.ui.dropdown')
  dropdown.dropdown()
})
4

You are placing your code in a directory that gets picked up the server you are importing it from a a server code.

In any case, Template code should be run only on the client because it is a client global and is undefined on the server.

That’s why you are getting that error.

1 Like
5

Also, if you are having other troubles with SUI, feel free to post them here. There are definitely a few things to watch for when using it with Meteor. But coming from bootstrap, the increase in things you can do programatically is nice!

6

Thank you! This was my problem. I had both the template and JS running from /test.

1 Like
7

I love it. I’ve used a few css/design frameworks and Semantic UI is by far the best.