How to open or show a Nav-Tab inside Ajax Jquery success?
Question
What I'm doing is - I have a three nav-tabs in my index.php, two nav-tabs can be directly access by clicking it, But one tab in the middle can't be easily access without entering the user's PIN for authentication.
My problem is the Admin-tab in the middle only show once when Ajax success was triggered successfully. And the other tabs (customer,history) is also showing its tab-contents inside the admin-tab.
1. How can I show/open the admin-tab every time I successfully verified my PIN thru AJAX success?
2. How can I prevent the content of Customer and History tab appearing on the admin-tab?
Here's the code I did but having a problem, I would appreciate any help, Thank you in advance :)
<!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);
?>
2 answers
solution1
0 2019-05-16 10:33:51
just .show() will show the tab. your code inside ajax for showing admin tab is wrong.
$('#admin').show();
solution2
0 2019-05-16 11:25:50
Following up on @Syed answer I think the best approach is something like this:
- create all 3 tabs, as if the 'admin' tab is always visible
- create a method that hides the 'admin' tab content if no pin is entered
- on click of the 'admin' tab, display the pin modal dialog
- when the pin is entered successfully, show the 'admin' tab content
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.