Semantic Ui Modal дублируется при повторных вызовах

У меня есть фрагмент кода jquery, который загружает файл как

$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");

Signup.php содержит

<?php include_once("../libs/php_header/php_header.php"); ?>

<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
 A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>

<script>
$('.s_umodal')

.modal('show');
</script>

Проблема в том, что я могу вызвать модальное окно, и оно появится. но в следующий раз, когда я нажму кнопку триггера (кнопку для отображения модального окна), он отобразит еще один, хотя я закрыл предыдущий. так что теперь у меня осталось два модальных окна. и если я нажму несколько раз, у меня останется несколько модальных окон. Я использую Semantic-UI.


php semantic-ui
person Shiva Acharjee    schedule 23.08.2015    source источник
comment
Что вы подразумеваете под отобразить еще один? Это исходное модальное окно, отображаемое снова. Вы хотите избежать этого (т. е. сделать так, чтобы модальное окно никогда не отображалось снова после его закрытия)?   -  person fstanis    schedule 25.08.2015
comment
@shiva-acharjee У меня была точно такая же проблема при реализации с помощью meteor.js, но я решил ее, и я помню, что это была очень глупая ошибка. Я пытаюсь вспомнить, но безуспешно, можете ли вы сказать, что говорит ваша консоль? Есть ошибки? Может быть, это поможет мне вспомнить решение.   -  person Plavookac    schedule 01.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Проблема с вашей реализацией заключается в том, что каждый раз, когда вы вызываете $('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random");, вы создаете новый элемент dom с div, который вы извлекаете из этого вызова ajax. Затем $('.s_umodal').modal('show'); показывает все модальные окна, возвращенные с сервера.

Без существенной реструктуризации кода один из подходов состоит в том, чтобы не извлекать содержимое div снова и снова. <div> будет частью основного HTML-кода, содержащего data_container. Ваш вызов Ajax может вернуть сценарий, который показывает диалоговое окно.

HTML:

<div class="data_container"></div>
<div class="ui modal s_umodal">
    <i class="close icon"></i>
    <div class="header">
      Modal Title
    </div>
    <div class="image content">
    <div class="image">
      An image can appear on left or an icon
     </div>
    <div class="description">
       A description can appear on the right
    </div>
   </div>
   <div class="actions">
   <div class="ui button">Cancel</div>
   <div class="ui button">OK</div>
  </div>
</div>

Ваш вызов Ajax может возвращаться:

<script>
  $('.s_umodal').modal('show');
</script>

Ваш вызов для загрузки содержимого может остаться прежним.

$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");

Однако, если вы готовы к значительным изменениям, вы можете попробовать использовать веб-службы JSON вместо возврата <script>.

person user850323    schedule 01.01.2016
comment
Я пытаюсь использовать модальные окна semantic-ui в рельсах, и у меня возникает та же проблема. Я визуализирую частичное, содержащее модальное. Не уверен, что делать, так как приведенное выше решение не сработало для меня. - person ctilley79; 20.05.2016