Блог

У меня есть панель мониторинга, и у меня есть одна страница, и я установил три вкладки навигации на одной странице с событиями нажатия, где я могу перемещаться по ссылкам вкладок на одной странице.

На вкладке навигации у меня есть вкладка «Пользователи», где я могу получить доступ ко всем данным пользователей. В области пользователя у меня есть кнопка изменить роль, когда я нажимаю на кнопку, появляется всплывающее окно с переключателями с двумя кнопками (ДА или НЕТ). Единственное, чего я хочу добиться, это передать идентификатор пользователя во всплывающее окно, получить динамические значения в переключатель из базы данных во всплывающем окне («уже реализовано, но оно не показывает значения, оно показывает только переключатели») и изменить роли пользователей без обновления страницы и остаться на текущей вкладке.

Вот мой код:

 <tbody>
    <?php
        $query = mysqli_query($conn,"select * from tbl_users, tbl_user_roles WHERE tbl_users.user_role_id = tbl_user_roles.user_role_id");
        $i = 1;
        while($fetch = mysqli_fetch_array($query))
    {?>
    <tr>
    <td><?php echo $i  ?></td>
    <td><?php echo $fetch['Username']?></td>
    <td><?php echo $fetch['email']?></td>
    <td><?php echo $fetch['role']?></td>
    <td><a href="#" onclick="show_dialog()" id="btn-show-dialog">Change Role</a></td>
    </tr>
    <?php } ?>
</tbody>
 

всплывающее окно

 <div class="overlay-roles" id="dialog-container">
    <form method="POST">
        <div class="popup-roles">
        <?php 
            $roles_query = mysqli_query($conn,"select * from tbl_user_roles");
            while ($roles = mysqli_fetch_array($roles_query)){
                $user_role = $roles['user_role'];
                echo "<tr><td><input type='radio' name='radio' value='<?php echo $user_role>'  /></td></tr>";
            }
        ?>
            <div class="text-right">
                <button  class="conf-dialog-btn-no" id="ignore">Cancel</button>
                <button name="delete-user" class="conf-dialog-btn-yes" id="confirm">Apply</button>
            </div>
        </div>
    </form>
</div>
 

javascript для отображения / скрытия всплывающего окна

 <script type="text/javascript">
    document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
    
    var overlayme = document.getElementById("dialog-container");
    function show_dialog() {
        overlayme.style.display = "block";
    }
    
    document.getElementById("confirm").onclick = function(){confirm()};
    function confirm() {/   
        overlayme.style.display = "none";
    }
    
    document.getElementById("cancel").onclick = function(){cancel()};
    function cancel() {
        overlayme.style.display = "none";
    }
</script>