Behaviors not working with Semantic UI

help
1

I am currently trying to integrate Semantic UI into my app. The visual styling is displaying fine. However, behaviors do not appear to be working and I am not able to raise any form of exceptions in my console to help with debugging.

As an example, here is the markup for a user nav dropdown:

 <div class="ui dropdown link item">
     {{currentUser.name}}
      <i class="dropdown icon"></i>
      <div class="menu">
          <a class="item">Sign Out</a>
       </div>
  </div>

Nothing happens when clicking on the dropdown.
In my custom.semantic.json file, I have

  {
      "definitions": {
      ...
      "dropdown": true,
      ...
     }
  }

In /client/client/js I added this based on usage docs info here:

$(’.dropdown’).dropdown({
transition: ‘drop’
});

More just for good measure, since it is not clear if including these jquery calls is needed.

Also, for reference, these are the packages I have installed:

accounts-google           1.0.4  Login service for Google accounts
accounts-ui               1.1.5  Simple templates to add login widgets to an app
coffeescript              1.0.6  Javascript dialect with fewer braces and semicolons
copleykj:jquery-autosize  1.17.8  Automatically adjust textarea height based on user input.
copleykj:livestamp        1.1.7  jQuery plugin providing auto-updating timeago text to your timestamped HTML elements using Moment.js
flemay:less-autoprefixer  1.0.2  The dynamic stylesheet language + Autoprefixer
fortawesome:fontawesome   4.3.0  Font Awesome (official): 500+ scalable vector icons, customizable via CSS, Retina friendly
iron:router               1.0.9  Routing specifically designed for Meteor
markdown                  1.0.4  Markdown-to-HTML processor
matteodem:easy-search     1.5.6  Easy-to-use search with Blaze Components (+ Elastic Search support)
meteor-platform           1.2.2  Include a standard set of Meteor packages in your app
mrt:moment                2.8.1  Moment.js, a JavaScript date library for dates, packaged for Meteor. See http://momentjs.com.
msavin:mongol             1.0.97  The insanely handy development package for Meteor.
reactive-var              1.0.5  Reactive variable
sacha:spin                2.0.4  Simple spinner package for Meteor
semantic:ui               1.12.1_1  Official Semantic UI Integration for Meteor
underscore                1.0.3  Collection of small helpers: _.map, _.each, ...
useraccounts:semantic-ui  1.11.1  Accounts Templates styled for Semantic UI.

Any tips on solving this issue, or how I might go about troubleshooting it, would be appreciated.

2

To eliminate the possibility that there might be a conflict with other packages etc, I created a fresh meteor app and installed only what is needed for semantic UI. I still get the same issue. Please see https://github.com/andersr/semantic-test

3

Oh they are absolutely needed! The basic integration cannot actually make those JS calls for you, it simply has no way of knowing which of your templates require JS behaviors, and when.

I’m using Semantic UI on multiple projects and what you have to do is the following:

Place those “behavior JS snippets” from the docs in Template.xxx.onRendered() callbacks so that they will be called in the appropriate places, and right when they are required and have the right HTML elements avilable to work with. Because just calling something like the above right when the JS is loaded doesn’t make sense because there are no rendered templates yet that could be enhanced with JS behavior.

Also, instead of using the global $ for the selectors, use this.$, so you properly scope them to just your template. See TemplateInstance.$ docs.

If you need more specific help or explanations then type out a couple more questions and I’ll be happy to provide more specifics.

It would certainly be super nice, if someone were to take the Semantic UI markup + JS and put them together into reusable complete templates that just work out of the box, where you don’t have to connect up the JS “manually” on template render. For now it hasn’t been worth the effort for me to jump into such an endeavor, haven’t been using SUI JS that heavily, just sprinkled in between here and there!

HTH

3 Likes
4

Yes, the solution was that behaviors need to be referenced via onRendered. Thanks!

1 Like
5

I got same issue with sidebar and pretty much any working knowledge with coding. Anyway simply using semantic in parts, like semanti ui accounts/passwords is suppose to work, isn’t helping this then?

6

@andersr Yea no, getting intuitive puts you at a loss. How is it done?

Ive pasted html stuff on the html page. What do i do next as it says to use templates and I can’t tell here templates come in.

7

Hi @janat08 - I’m sorry but I’m not sure I understand your question. Do you maybe have actual code snippets or a repo you could point to? I think that might help.

8

http://semantic-ui.com/modules/sidebar.html

Im trying to make a module work “sidebar”. It won’t appear. Explain stupid.

9

So this is what it’s meant to look like

10

You need to

  1. Initialize the side bar in an onRendered function

  2. Attach the toggle action to the right object (here a button with class=“action-toggle-sidebar”)

    Template.body.onRendered (function () {
    this.$(’.sidebar.menu’).sidebar(‘attach events’, ‘.action-toggle-sidebar’)
    })

1 Like
11

I think the right way is to use template which is what the thread about
because it won’t let use js in view.

1 Like
12

Experienced a bunch of problems with Semantic UI & blaze / react… You need to set the context ( http://semantic-ui.com/modules/sidebar.html#/settings ) or set the detachable to false (modals) as they are moved within the DOM after init and blaze / react is unable to reach them.

1 Like