如何在Ajax Jquery内部打开或显示Nav-Tab成功?

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">&times;</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个回答



只需 .show()</ code>即可显示标签。 用于显示管理选项卡的ajax中的代码是错误的。</ p>

  $('#admin')。show(); 
</ code> </ pre>
< / DIV>

展开原文

原文

just .show() will show the tab. your code inside ajax for showing admin tab is wrong.

$('#admin').show();

dow98764
dow98764 嗨Syed Mohamed Aladeen,我尝试了你的建议,它只工作一次,我的意思是当我尝试点击“客户和历史记录”选项卡然后再次单击“管理”选项卡并输入Pin它不再起作用? 谢谢
一年多之前 回复
dongxia19772008
dongxia19772008 让我尝试一下,并会回复你:)谢谢
一年多之前 回复



关注@Syed回答我认为最好的方法是这样的:</ p>

    \ n
  • 创建所有3个标签,就好像“管理员”标签始终可见</ li>
  • 如果没有输入图钉,则创建隐藏“管理员”标签内容的方法</ li>
  • 点击“管理员”标签,在成功输入图钉时显示图钉模式对话框</ li>
  • ,显示“管理员”标签内容</ li>
    </ ul>

    </ div>

展开原文

原文

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐