Что я делаю, так это то, что у меня есть три навигационных вкладки в моем index.php, к двум навигационным вкладкам можно получить прямой доступ, нажав на них, но одна вкладка в середине не может быть легко доступна без входа в PIN-код пользователя для аутентификации.
Моя проблема в том, что вкладка Admin в середине показывается только один раз, когда успех Ajax был успешно запущен. И на других вкладках (клиент, история) также отображается содержимое вкладки внутри вкладки admin .
1. Как я могу показать / открыть вкладку администратора каждый раз, когда я успешно подтвердил свой PIN-код через успех AJAX?
2. Как я могу предотвратить отображение вкладки «Клиент» и «История» на вкладке «Администратор»?
Вот код, который я сделал, но возникли проблемы, я был бы признателен за любую помощь, Заранее спасибо:)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Find Date and Time</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Open Nav-Tab</title>
</head>
<body>
<div class = "container">
<ul class = "nav nav-tabs">
<li class = "nav-item"><a href = "#customer" data-toggle = "tab" class = "nav-link active">Customer</a></li>
<li class = "nav-item"><a href = "#enterPinModal" data-toggle = "modal" class = "nav-link">Admin</a></li>
<li class = "nav-item"><a href = "#history" data-toggle = "tab"class = "nav-link">History</a></li>
</ul>
<div class = "tab-content">
<div class = "tab-pane container active" id = "customer">
<br><br>Show Customer Information
</div>
<div class = "tab-pane container" id = "admin">
<br><br>Show Enter Pin Modal first for authetication before showing Admin Information
</div>
<div class = "tab-pane container" id = "history">
<br><br>Show History here
</div>
</div>
<!-- ENTER PIN MODAL -->
<div class = "modal" id = "enterPinModal">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title">Security Confirmation</h5>
<button class = "close" data-dismiss = "modal">×</button>
</div>
<div class = "modal-body">
<label class = "font-weight-bold">PIN #:</label>
<input type = "password" maxlength = "6" id = "pin_no" class = "form-control" />
</div>
<div class = "modal-footer">
<button id = "submit_pin" class = "btn btn-success btn-sm">Submit</button>
<button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ajax
<script>
$("#submit_pin").click(function () {
var pin = $("#pin_no").val();
$.ajax({
url: "pin_verify.php",
type: "post",
data: {
pin_number: pin
},
success: function(data) {
$('#admin').show();
$('#enterPinModal').modal('hide');
}
});
});
</script>
PHP
<?php
$cn = mysqli_connect("localhost","root","","testdb");
$pin = $_POST['pin_number'];
$sql = "SELECT * FROM tblPin WHERE pin = '$pin'";
$result = mysqli_query($cn,$sql);
?>