Semantic Ui Modal在重复调用时重复

Question

I have a piece of jquery code which load a file as

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

Signup.php contains

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

The problem is, I can call the modal box and it shows up. but next time I click on the trigger button (button to show modal) it display another one even though I have closed the previous one. so now I am left with two modal boxes. and if I click multiple times i will be left with multiple modal boxes. I am using Semantic-UI.

Answer 1

The problem with your implementation is that every time you call $('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random"); you are creating a new dom element with the div you are fetching from that ajax call. $('.s_umodal').modal('show'); is then showing all of the modal boxes returned from the server.

Without restructuring your code significantly, One approach is to not keep fetching the content of the div over and over again. The <div> will be a part of the main html that contains data_container. Your Ajax call can return the script that shows the dialog box.

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>

Your Ajax call could be returning:

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

Your call to load the content could remain the same.

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

If you are up for a significant change however, You can try to use JSON web services instead of returning <script>.