After div refresh modal cant open

Hi, I have a div inside my page and refresh every 1 minutes. At begining everything is ok. But, after refresh even i click button modal not open. here is my code:

1. Homepage

...
<script src="../js/status.js"></script>

...
...
                            <div id="activeuserlist" class="card-action">
                                <table class="bordered responsive-table">
                                    <thead>
                                        <tr>
                                            <th data-field="id">Kullanıcı Adı</th>
                                            <th data-field="id">IP adresi</th>
                                            <th data-field="mac">Mac Adresi</th>
                                            <th data-field="session">Bağlantı Başlangıç</th>
                                            <th data-field="activity">Son İşlem Tarihi</th>
                                            <th class="noprint" data-field='action'>Hareket</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <?php
                                        $query =  "SELECT * FROM `active_users` WHERE `disconnect`=0";
                                        $result = $conn->query($query);
                                        if($result->num_rows > 0)
                                            {
                                                while($row = $result->fetch_assoc()){ ?>
                                        <tr>
                                            <td><?php echo $row['username'] ?></td>
                                            <td><?php echo $row['ipaddr'] ?></td>
                                            <td><?php echo $row['mac'] ?></td>
                                            <td><?php echo $row['session_start'] ?></td>
                                            <td><?php echo $row['last_activity'] ?></td>
                                            <td class=" noprint"><a href="#MODAL" onclick="SetId('<?php echo $row['username']; ?>');" class="btn-floating red tooltipped modal-trigger" data-position="left" data-delay="50" data-tooltip="Bağlantıyı kes : <?php echo $row['username'] ?>" ><i class="material-icons">&#xe047;</i></a></td>
                                        </tr>
                                    <?php }} ?>
                                    </tbody>
                                </table>
                            </div>

        <div id="MODAL" class="modal">
            <div class="modal-content">
                <h4>Erişim Sonlanıyor</h4>
                <div class="input-field col m6">
                Kullanıcı internet erişimi sonlanacaktır.   Onaylıyor musunuz?
                </div>
            </div>
            <div class="modal-footer">
                <form method="post">
                    <button onclick="Action('userend');" href="#!" class="btn waves-effect waves-red red " type="submit" name="btn_ku_end">Sonlandır
                        <i class="material-icons left">&#xe876;</i>
                    </button>    
                    <button onclick="RemoveValue();" class="btn modal-close  waves-effect waves-green green" type="submit" name="action" style="margin:5px">Vazgeç
                        <i class="material-icons left">&#xe14c;</i>
                    </button>
                    <input type="hidden" value="" name="user_end_id" id="hdnid_user_end" />
                </form>
            </div>
        </div>

2. Here is status.js:

$(document).ready(function() 
    { 
    setInterval(function () 
        {
            $("#activeuserlist").html("").load('activeuserlist.php')

        },60000);

** 3. Here is activeuserlist.php:**

<?php
SOME PHP CODE HERE...
?> 

            <div id="activeusers" class="card-action">
                <table class="bordered responsive-table">
                    <thead>
                      <tr>
                          <th data-field="id">Kullanıcı Adı</th>
                          <th data-field="id">IP adresi</th>
                          <th data-field="mac">Mac Adresi</th>
                          <th data-field="session">Bağlantı Başlangıç</th>
                          <th data-field="activity">Son İşlem Tarihi</th>
                          <th class="noprint" data-field='action'>Hareket</th>
                      </tr>
                    </thead>
                    <tbody>
                    <?php if($result->num_rows > 0){ 
                while($row = $result->fetch_assoc()){ ?>
                      <tr>
                        <td><?php echo $row['username'] ?></td>
                        <td><?php echo $row['ipaddr'] ?></td>
                        <td><?php echo $row['mac'] ?></td>
                        <td><?php echo $row['session_start'] ?></td>
                        <td><?php echo $row['last_activity'] ?></td>
                        <td class=" noprint">
                            <a href="#MODAL" onclick="SetId('<?php echo $row['username']; ?>');" class="btn-floating red tooltipped modal-trigger" data-position="left" data-delay="50" data-tooltip="Bağlantıyı kes : <?php echo $row['username'] ?>" ><i class="material-icons">&#xe047;</i></a></td>
                      </tr>
                      <?php }} ?>
                    </tbody>
                  </table>
            </div>`

What goes wrong about open modal?

[tceydeliler]

I replace $(this).openModal(); with $('#MODAL').openModal(); now its work. Thanks a lot…

[philipraets]

You only need the DOM Ready if you load js before the end of the page (for example in <head>). And you don’t need the outer div with id activeuserlist in activeuserlist.php because the load-function will replace the content in the original div. Otherwise you will get a div with id activeuserlist inside a div with id activeuserlist. You also don’t need to clear html (the .html(‘’) ) before doing load. for more documentation on jquery load, see: http://api.jquery.com/load/

There are 2 options to get it working:

Option 1 with the callback in load:

$(document).ready(function(){
    setInterval(function(){
        $("#activeuserlist").load('activeuserlist.php', function(){
            $(a.modal-trigger).leanModal();
        })
    },60000);
});

Option 2 is to bind a click event in DOM Ready on the modal-trigger like this:

$(document).ready(function(){
    $("#activeuserlist").on("click", "a.modal-trigger", function(){
        $(this).openModal();
    });
    setInterval(function(){
        $("#activeuserlist").load('activeuserlist.php')
    },60000);
});

These are just examples, they aren’t tested but should be in the right direction.