CODEWITHSUNDEEP
javascriptjquerycssmeteorsemantic-ui
Sebastian Grebe
Sebastian Grebe

Reputation: 668

Semantic UI Modal only shows up once in Meteor

I have got a meteor app which uses the Semantic UI. I am using the semantic:ui-css package for this.

I have got a template called project where I want to show a modal. There for I created a second template which is the modal like this:

<template name="xform">
  <div id="modal" class="ui modal">
  <i class="close icon"></i>
  <div class="header">New Project</div>
  <div class="content">
    <div class="ui form" id="newProject">
      <div class="one fields">
        <div class="field">
          <legend>Project Details</legend>
          <label>Name</label>
          <input id="name" name="name" type="text" placeholder="Project name">
        </div>
        <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui button">
      Cancel
    </div>
    <div class="ui button">
      Okay
    </div>
  </div>
  </div>
</template>

Then I haved added a event to a button like this to show the modal:

Template.projects.events({
  'click .newProject': function(event, template){
    template.$('.ui.modal').modal({
          onDeny    : function(){
            return false;
          }}).modal('show');
  }
});

If I click the button for the first time the modal opens like wanted. I can see that the modal is now not anymore inside the html of my template but at the end of my body. I can close the modal using the close button but when I now try to open it again it does not open any more. The modal div is still on the bottom of my body.

I have tried several ways to workaround this problem but none have worked.

Here my complete code: http://i.imgur.com/r9JNrlr

Upvotes: 0

Views: 1060

Answers (2)

Max Hsu
Max Hsu

Reputation: 21

Try to set the modal non-detachable in onRendered callback function of template.

Template.projects.onRendered(() => {
    $('.ui.modal').modal({ detachable: false });
});

Hope it helps.

Upvotes: 0

Michael Mason
Michael Mason

Reputation: 932

To follow up from my comment, this is the code that is working for me. It definitely seems like you have an issue with jQuery finding multiple elements. I created a new meteor project:

$ meteor create semantic
$ cd semantic
$ meteor add semantic:ui-css
$ meteor add iron:router

semantic.html

<template name="MainLayout">
    <h1>Title</h1>
    {{> yield}}
</template>

<template name="projects">
    {{> xform}}
    <button class="newProject">New Project</button>
</template>

<template name="xform">
  <div id="modal" class="ui modal">
  <i class="close icon"></i>
  <div class="header">New Project</div>
  <div class="content">
    <div class="ui form" id="newProject">
      <div class="one fields">
        <div class="field">
          <legend>Project Details</legend>
          <label>Name</label>
          <input id="name" name="name" type="text" placeholder="Project name">
        </div>
        <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui button">
      Cancel
    </div>
    <div class="ui button">
      Okay
    </div>
  </div>
  </div>
</template>

semantic.js

if (Meteor.isClient) {
  Template.projects.events({
    'click .newProject': function(event, template){
      $('.ui.modal').modal({
            onDeny    : function(){
              return false;
            }}).modal('show');
    }
  });

  Meteor.startup(function() {
    Router.configure({
      layoutTemplate: 'MainLayout'
    })
    Router.route('/',{
      name: 'projects'
    })
  });
}

After running meteor and loading http://localhost:3000 I can open and close the modal multiple times.

Upvotes: 1

Related Questions