[blaze] click event not triggered in semantic-ui modal

3,596 views
Skip to first unread message

Dax

unread,
Mar 18, 2014, 9:25:10 AM3/18/14
to meteo...@googlegroups.com
Hi All,

Just observed while trying out semantic-ui and meteor.

meteor create sem;
cd sem;
mrt add semantic-ui;


I have the following 

The click event for 'okButton' is triggered  when using meteor version 0.7.1.2 and 0.7.2-rc1 but not with version blaze-rc1 and 0.7.2-rc1-with-blaze
<head>
  <title>sem</title>
</head>

<body>
  {{> sampleModal}}
</body>

<template name="sampleModal">

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    New Order
  </div>
  <div class="content">
    <div class="left">
      Content can appear on left
    </div>
    <div class="right">
      Content can appear on right
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button okButton">OK</div>
  </div>
</div>

</template>
if (Meteor.isClient) {
  Template.sampleModal.events({
    'click .okButton': function (e,t) {
        console.log("You pressed the ok button");
    }
  });

  Template.sampleModal.rendered = function(){
  $('.ui.modal').modal('show');
  }
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Thanks,
Dax

Gadi Cohen

unread,
Mar 20, 2014, 3:22:41 AM3/20/14
to meteo...@googlegroups.com
I'm confirming this.  The jQuery event that Meteor attaches to is definitely firing, but for whatever reason the blaze / ui event handler is not calling the original callback.  e.g. in this case, overriding just the handler in the event, it runs:  jQuery._data($('body')[0], 'events').click[0].handler = function() { alert(1); };

Dax, could you put the below into a git-cloneable repo and report as per https://github.com/meteor/meteor/wiki/Contributing-to-Meteor#reporting-a-bug-in-meteor?  And paste a link to the created issue here?

Dax

unread,
Mar 23, 2014, 7:51:06 AM3/23/14
to meteo...@googlegroups.com
Hi All,

Here is the git repo demonstrating the bug

David Greenspan

unread,
Mar 23, 2014, 11:03:11 AM3/23/14
to meteo...@googlegroups.com
Semantic UI takes the modal element out of the DOM and puts it somewhere else.  Meteor event handlers use event delegation, so they don't work if you do that.

You might have some luck if you wrap the inside of the modal element in a template and put the event handlers on that template, so they are moved too.


--
You received this message because you are subscribed to the Google Groups "meteor-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to meteor-talk...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Gadi Cohen

unread,
Mar 23, 2014, 1:20:34 PM3/23/14
to meteo...@googlegroups.com
Hi David

Can I just double check this with you?  Because the jQuery event that calls the Meteor UI event handler is still firing... i.e. the event is correctly propagating to the enclosing element's event handler (see my test, above).  But I'm not familiar with how Meteor handles these events internally... so maybe this is still not possible (and your workaround is sensible), but just wanted to make sure.

Dax

unread,
Mar 23, 2014, 10:53:08 PM3/23/14
to meteo...@googlegroups.com
Hi David and Gadi,

I did the modification based on what David suggested and it works (using 0.8.0-rc0 release)!
Defined events in the template (sampleModal) are now triggered. 

<div class="ui modal">

   {{> sampleModal}}

</div>

Thank you very much!

Dax
--
Upcat Review @ upcat.org

David Greenspan

unread,
Mar 24, 2014, 1:36:17 AM3/24/14
to meteo...@googlegroups.com
HI Gadi,

The jQuery event handler listens on the (original) parent element of the template for the given selector.  So if the template is at the top level and the event handler is on "click .foo", the jQuery event handler will catch any click on an element of class "foo" on the page.  It then has to determine whether the element is part of the template in question.  The case where the template has been moved isn't one we handler; it would be pretty hard to account for in general.

The Semantic UI page on modals mentions that you can tell it not to detach the element: http://semantic-ui.com/modules/modal.html#/usage

-- David

Gadi Cohen

unread,
Mar 24, 2014, 2:11:49 AM3/24/14
to meteo...@googlegroups.com
Ok, thanks.  Good to know about the no detach option... with those docs in mind, I believe your original suggestion of putting the template inside the modal should remain the suggested pattern for this case.  Thanks for looking into it.
Reply all
Reply to author
Forward
0 new messages