CODEWITHSUNDEEP
javascriptjquerymeteorsemantic-ui
JRedford
JRedford

Reputation: 106

Semantic-ui modal duplicating

I have a Semantic-ui modal on a route that initially works as expected (first time the app is loaded). I can open and close multiple times without issue. If I navigate away from the route and back again and then click the modal button again (which fires the event below) the modal html is duplicated. Each time I do this (navigate away and back), another modal is added.

My modal is broken into two templates, which as I read, is the way it should be.

html:

<template name="contentList">
  {{> addContent}}
  <button class="ui blue button" href="#" id="modal">
    Add Content
  </button>
</template>

<template name="addContent">
  <div id="modal" class="ui small addContent modal">
    {{>addContentForm}}
  </div>
</template>

<template name="addContentForm">
  <!-- Form HTML goes here -->
</template>

js:

Template.contentList.events({
  'click #modal': function(e, t) {
    event.preventDefault();
    $('.ui.modal')
    .modal({
      onApprove : function() {
        $('.ui.modal').modal('hide');
      }
    })
    .modal('show');
  }
});

What do I need to do to stop this behaviour?

Upvotes: 5

Views: 3901

Answers (3)

Joozey
Joozey

Reputation: 238

Update

After testing some more with the workaround I had below, I encountered issues where buttons wouldn't respond. After digging around further, I stumbled upon this bug report for Semantic-ui: https://github.com/Semantic-Org/Semantic-UI/issues/3200.

Even though the problem has been around since 2016, it appears to be still unresolved. Several solutions are offered here. The one that worked well for me is calling $('body .modals').remove(); in the onCreated function of my dynamic templates. You could also remove specific modals that give you trouble: $('body .modals .addItem'). This way, any old modals along with their event bindings are removed first before new ones are added. I'm still not entirely sure if this is exactly what's going on, but my testings seem to support it.

Original post

I am having a very similar issue. The marked answer does not solve it for me. I have a div with the modal class. In it I load the content via template. It displays two modals after opening, closing, navigating away and back, and open it again.

I noticed the modal gets added twice to the dimmer div somewhere during navigation. So I wrote a small function to prevent a modal from being added more than once. Be aware that this is a workaround, and there may be a deeper problem going on with larger consequences.

Template.editor.helpers({
  modalNotAdded: function(modalClass) {
    //search in .ui.modals div, an element of the dimmer, for modalClass (.addItemModal in this example). If not found, return true.
    return $(".ui.modals").find(modalClass).length == 0;
  }
});
<template name="editor">

  <!-- only add modal if modalNotAdded helper function with argument ".addItem" returns true !-->
  {{#if modalNotAdded ".addItem"}}
  <div class="ui longer modal addItem">
    {{> addItemModal}}
  </div>
  {{/if}}

</template>

<template name="addItemModal">
  <!-- your modal content !-->
</template>

Upvotes: 1

JRedford
JRedford

Reputation: 106

Well don't I feel like a fool...

The reason the modal div was duplicating was because the {{>addContent}} modal was placed within a div. Moving that code out of a div fixed the issue. My fault for simplifying the code in my question too much!

Upvotes: 1

Areca
Areca

Reputation: 1292

Having multiple dom elements with same id can result unexpected behaviour. You have a div with id "modal" and a button again with id "modal". Change the id of button.

Upvotes: 0

Related Questions