Meteor with Semantic-UI template click event on sidebar isn't detected?

help
1

I’m working with Semantic-UI and meteor. So far I like what I see. It’s fairly easy to layout some really nice UI pretty quickly, but I’ve run into an issue where I have a sidebar control with multiple <a class="item"></a> sections to form the sidebar menu, and when I set an event on the template for 'click .item', I don’t get anything in the UI or console.

<template name="sideNav">
<div id="sideMenu" class="ui inverted left vertical sidebar thin menu">
    <a class="item" id="homeNav">
        <i class="home icon"></i> Home
    </a>
    <a class="item" id="giveAGiftNav">
        <i class="gift layout icon"></i> Give a Gift
    </a>
    <a class="item" id="dashboardNav">
        <i class="dashboard layout icon"></i> Dashboard
    </a>
    <a class="item" id="recipientsListNav">
        <i class="list icon"></i> Recipients List
    </a>
    <a class="item" id="addRecipientsNav">
        <i class="add user icon"></i> Add Recipients
    </a>
    <a class="item" id="editRecipientsNav">
        <i class="edit icon"></i> Edit Recipients
    </a>
    <a class="item" id="sendReminderNav">
        <i class="send icon"></i> Send Reminder
    </a>
    <a class="item" id="settingsNav">
        <i class="settings icon"></i>Settings
    </a>
</div>

With that template used in HomeLayout.html

<template name="HomeLayout">
    {{> headerLayout}}

    {{> sideNav}}
</template>

And the events in sideNav.js as:

Template.sideNav.events({
    'click .sidebar'() {
        console.log('Clicked Menu Icon');
        $("#sideMenu").sidebar('show');
    },
    'click .item'() {
        // event.preventDefault();

        var clickedTarget = event.target.id;
        console.log("User clicked: " + clickedTarget);
        FlowRouter.go('/' + clickedTarget);
    },
});

I just need to know where I’m going wrong with this. I appreciate any help or guidance.

If you need more info, please let me know.

2

Try this ->

'click #sideMenu.item' (e, tmpl) {
    e.preventDefault();
}
3

Thanks @erickeno. I just tried that, but no joy.

I should have edited my code above as well, as I have actually tried just the class .item without the element id, and I have tried changing the reference template for the event.

Just seems like the click isn’t passing through somehow, but the hover events are working from the Semantic UI base…so I’m just a bit lost on what to try next.

4

YMMV, but this is what I have (simplified):

<template name="fullLayout">
  {{#if Template.subscriptionsReady}}
    <div class="ui sidebar">
      <div class="ui fluid vertical accordion menu sidebar-menu">
        {{> Template.dynamic template=sidebarItems}}
      </div>
    </div>
    <div class="pusher">
      <div class="ui top fixed menu">
        {{> Template.dynamic template=navbarItems}}
      </div>   
      <div class="ui full-width-content-container" style="overflow: auto">
        {{> Template.dynamic template=content}}
      </div>
    </div>
  {{/if}}
</template>

And I have my events attached to the fullLayout template:

Template.fullLayout.events({
  'click .sidebar-toggle' () {
    $('.ui.sidebar')
      .sidebar('toggle');
  },
  'click .sidebar-menu .menu-item' () {
    $('.ui.sidebar')
      .sidebar('hide');
  }
});
5

Just to be clear you’re using a template for the actual items, but the events on the item works when attached to the fullLayout template?

Interesting…I’ll try to modify and see if I can do it that way. I’m bound to be missing something…just not sure what.

6

I keep getting a warning that sidebar had to create the pusher element. I’ve tried adding it in several places, but keep getting the same warning. Could that be the issue?

7

Could be. If you look at the semantic docs, you’ll see that your non sidebar content should be wrapped in a pusher div, like in the example I posted above.

8

Also make sure that when you right click and inspect the item elements, that the item is actually selected, and not an overlay. Encountered this many times, where another (invisible) container is hijacking the clicks by secretly being a layer above the items.

The .sideMenu.item selector certainly will not work, as you are trying to find an element with both sideMenu and item class. There should be a space between them to indicate that the item is lower in the hierarchy.

9

@jorgeer Great thought, but it does appear that with right-click --> inspect, I am taken right to the .item element I expect, so I would think my left click should be landing properly.

@vigorwebsolutions I am continuing to try and get the pusher class div in the right place, but no matter where I put it, it still creates one (at least according to the console in Chrome).

10

So, I’m not sure what tools you’re working with, but in this project, I’m using flow, blaze, and blazelayout. I set the following:

BlazeLayout.setRoot('body');

And then my html structure looks like:

<html>
  <head>
  </head>
  <body>
    <script>
      <!-- all the meteor scripts -->
    </script>
    <div class="ui sidebar">
      <!-- sidebar stuff -->
    </div>
    <div class="pusher">
      <!-- all my non-sidebar content -->
    </div>
  </body>
</html>

It definitely took me a few tries to get the pusher errors to stop. I think (it was a while ago) that my reasoning for setting the doc root was to help with this issue. At any rate, if you can get your structure looking like this, I think you will see those errors go away.

11

To follow up, I think if your pusher div isn’t a direct child of your body, you will have issues…

12

Ok. I’m not even showing a body tag in my main.html right now. I was letting meteor’s build process handle it. I’ll add it, then add the pusher div in it, and see if that helps.