How can I use a template inside a semantic-ui modal?

[Paulo Borges]

An example:

// templates.html

<template name="home">

  <p>foo bar</p>

  {{> myModal}}

</template>

<template name="myModal">

  <div id="mymodal" class="ui modal">

    <p>My modal</p>

    <button id="mybutton">Click here</button>

  </div>

</template>

// templates.js

Template.myModal.rendered = function () {

  $('#mymodal').modal('show');

};

Template.myModal.events({

  'click #mybutton': function () {

    console.log('clicked!');

  }

});

The modal appears, but the events don't work. I think the reason is because the DOM element is moved from its original position.

This example has a git repository: https://github.com/pauloborges/meteor-semantic-ui-modal

[Dax]

Try this instead

// templates.html

<template name="home">

  <p>foo bar</p>

  <div id="mymodal" class="ui modal">

    {{> myModal}}

  </div>

</template>

<template name="myModal">

 

    <p>My modal</p>

    <button id="mybutton">Click here</button>

  

</template>

I encountered this also a while ago below is the thread

https://groups.google.com/d/msg/meteor-talk/0Upkyo9F54k/McRPRy49IrgJ

Dax

[Paulo Borges]

Hi Dax,

thanks!

I've modified your suggestion a little:

// templates.html

<template name="home">

  <p>foo bar</p>

  {{> myModal}}

</template>

<template name="myModal">

  {{> innerMyModal}}

</template>

<template name="innerMyModal">

  <div id="mymodal" class="ui modal">

    <p>My modal</p>

    <button id="mybutton">Click here</button>

  </div>

</template>

// templates.js

Template.innerMyModal.rendered = function () {

  $('#mymodal').modal('show');

};

Template.innerMyModal.events({

  'click #mybutton': function () {

    console.log('clicked!');

  }

});

I think this way is more "pluggable" because we can use the external template directly.

--
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.

[Oliver Bojahr]

I use foundation and want to receive a click event within a modal dialog (reveal).

Funny thing it works fine in a small test project but does not work in my current project.

Ideally someone give me a hint on how to debug these events and investigate what’s the difference.
Secondary, someone might trapped as well into and solved it.

I also made a copy of the test projects template into a new template within my project and this also denies working.

Testproject is without iron-router, but how ...

So I’d really appreciate if someone could help me in raising my debugging skills.

Oliver

[Oliver Bojahr]

Additional info:

I found another related issue suggesting to place the inner part of a modal dialog into another template.
So I gave it another try and it appears to work. But…. what the …
Some explanatory words would really help me in understanding. I hate unsolved mysteries and walking dead.

Refer to: Aw: [meteor-talk] Re: [blaze] click event not triggered in semantic-ui modal