单击时，jQuery Ajax Load（）中的错误/错误会刷新屏幕

时间：2018-12-07 03:55:29

标签： php jquery ajax html5

我正在做一个Web应用程序，其中确实有一些侧边菜单。但是，单击这些菜单时遇到了一些问题。它以某种方式刷新了整个页面。例如，我在主菜单下有以下子菜单-“计划参与”：

  1. 订婚通知备忘录
  2. 参与审计计划

当我单击“参与通知”备忘录时，它可以正常工作。但是从此菜单中，单击第二个菜单即“审计参与计划”时，整个页面都会刷新，我需要重新单击“审计参与计划”以显示其表单。当我先单击“审计参与计划”，然后单击“参与通知备忘录”时，也会发生同样的事情。

这是链接所在的代码。我使用jQuery Ajax在此页面中加载其他php文件。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="/auditone/style.php">
<link rel="stylesheet" href="/auditone/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/auditone/jquery-3.3.1.js"></script>
<script src="/auditone/bootstrap.min.js"></script>
<style>
.topnav{
    background-color: #333;
    overflow:hidden;
    z-index: 1;
    top:0;
    width:100%;
}

.topnav a{
    float: left;
    color: #f2f2f2;
    text-align:center;
    padding: 14px 16px;
    text-decoration:none;
    font-size: 17px;
}

.topnav a:hover{
    background-color: #ddd;
    color: black;
}

.topnav a.username{
    float:right;
}

.topnav a.active{
    background-color: #A9A9A9;
    color: black;
}

.content{
    padding: 14px 16px;
    text-decoration:none;
    font-size: 17px;
    margin-left: 15px;
}

#myTable{
    border-spacing: 0;
    width:100%;
}

#myTable th{
    background-color: #333;
    cursor:pointer;
    color: white;
}

.linkrow{
    cursor:pointer;
    background-color: white;
}

tr.highlighted td {
    background: #5c8a8a;
    color: white;
}

input[type="submit"]{
    background-color: #5c8a8a;
    border:none;
    color:white;
    padding: 16px 32px;
    cursor: pointer;
    width: 160px;
    display: block;
    margin: 0 auto;
}
.row.content {
    height: 100vh;
    width: 100%;
}
.sidenav{
    background-color: #f1f1f1;
    height: 100vh;
    left:0;
    z-index: 1;
    overflow-x: hidden;
    position: absolute;
    margin:0;
    padding:0;
    font-size: 17px;
}

.maincontent{
    height: 100vh;
    z-index:  -1;
    overflow-x: hidden;
    position: fixed;
    margin:0;
    padding:0;
    font-size: 17px;
}

ul, #myUL{
    list-style-type:none;
}

#myUl{
    margin:0;
    padding:0;
}

.box::before{
    content: "\2610";
    color:black;
    display: inline-block;
    margin-right:6px;
}

.check-box::before{
    content: "\2611";
    color:dodgerblue;
}

.nested{
    display: none;
    font-size: 15px;
}

.nested2{
    display: none;
}

.active{
    display:block;
}

.container fieldset{
    border:border: 5px groove;
}
</style>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</head>

<body>
<div class="topnav">
    <a id = "button" class="active" href="list.php"><img src="/img/storage.png" width="45" height="45"></a>
    <a href ="#"><img src="/img/event.png" width="45" height="45"></a>
    <a href ="#"><img src="/img/alarm.png" width="45" height="45"></a>
    <a class="username">Welcome, JCPCRUZ </a>
</div>
    <div class = "col-sm-3 sidenav">
    <br>
        <ul id="myUL">
                <li><span class="box">Planning the Engagement</span>
                <ul class="nested">
                <li><a href="#" id="load_enm">1. Engagement Notice Memo</a></li>
                <li>2. Engagement Working Paper</li>
                <li> <a href="#" id="load_aep">3. Audit Engagement Plan</a></li>
                <li> <a href="#" id="load_ocmm">4. Opening Conference Minutes of Meeting</a></li>
                </ul>
            </li>

            <li><span class="box">Performing the Engagement</span>
                <ul class="nested">
                <li>1. Engagement Working Paper</li>
                <li> 2. Audit Finding Sheet</li>
                </ul>
            </li>

            <li><span class="box">Communicating the results</span>
                <ul class="nested">
                <li> Exit Conference Minutes of Meeting </li>
                <li> Detailed Audit Report</li>
                <li> Executive Summary</li>
                </ul>
            </li>

            <li><span class="box">Monitoring</span>
                <ul class="nested">
                <li> Post Audit Monitoring Sheet </li>
                </ul>
            </li>
        </ul> 
    </div>

    <div class="col-sm-9 maincontent" id="maincontent">  

    <div>

<script>
    var toggler = document.getElementsByClassName("box");
    var i;

    for (i = 0; i < toggler.length; i++)
    {
        toggler[i].addEventListener("click",function(){
            this.parentElement.querySelector(".nested").classList.toggle("active");
            this.classList.toggle("check-box");
        });
    }
</script>

<script>
    $(document).ready(function(){
        $("#load_enm").click(function(){
            $("#maincontent").load("enm.php");
        });
    });

    $(document).ready(function(){
        $("#load_aep").click(function(){
            $("#maincontent").load("eauditplan.php");
        });
    });
</script>
</body>
</html>

编辑：我确实注意到了一些事情，只有在enm.php和eauditplan.php受到影响/单击时才会发生。但是，当我习惯使用简单的php文件时，效果很好。

这是我的enm.php和eauditplan.php的代码

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="/auditone/style.php">
<link rel="stylesheet" href="/auditone/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/auditone/jquery-3.3.1.js"></script>
<script src="/auditone/bootstrap.min.js"></script>
<style>

input[type=text],[type="date"]{
    width: 60%;
    padding: 4px;
}

input[type=text]:focus{
    border: 1px solid #555;
}

.col-25{
    float: left;
    width: 30%;
    margin-top:6px;
}

.subCol{
    float: left;
    width: 30%;
    margin-top:6px;
    text-indent: 50px;
}

.rowheader{
    float: left;
    width: 30%;
    margin-top:6px;
}

.col-75{
    float: left;
    width: 70%;
    margin-top: 6px;
}

.col-100{
    float: left;
    width: 80%;
    margin-top: 6px;
    margin-left:30px;
}

.row:after{
    content: "";
    display: table;
    clear: both;
}

input[type="button"]{
    background-color: #5c8a8a;
    border:none;
    color:white;
    cursor: pointer;
    width: 60px;
}
.tab{
    overflow:hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width:70%;
    margin-left:15px;
}

.tab button {
    background-color: inherit;
    float:left;
    border:none;
    outline:none;
    cursor:pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover{
    background-color: #ddd;
}

.tab button.active{
    background-color: #ccc;
}

.tabcontent{
    display:none;
    border-top:none;
    width:70%;
    padding: 6px 12px;
    margin-left:15px;
}
</style>
</head>

<div class="container">
    <form>
        <div class ="row">
            <div class="col-30 rowheader">
            <h3>Audit Engagement Plan</h3>
            </div>
            <div class="col-70 forcbox">
            <br>
                <input type="checkbox" disabled> Prepared | <input type="checkbox" disabled> Reviewed | <input type="checkbox" disabled> Noted &nbsp; <input type = "button" value ="Edit"> <input type = "button" value ="Save"> <input type = "button" value ="Print">
            </div>
        </div>

        <div class="tab">
            <button class="tablinks" onclick="openPage(event, 'page1')" id="defaultOpen">Page 1</button>
            <button class="tablinks" onclick="openPage(event, 'page2')">Page 2</button>
        </div>
        <div id="page1" class="tabcontent">
                <div class="col-100">
                    I. Background:<br>
                    <textarea rows="3" cols="80" name="EngDescription"></textarea>
                </div>

                <div class="col-100">
                    II. Audit Objective:<br>
                    <textarea rows="3" cols="80" name="EngDescription"></textarea>
                </div>

                <div class="col-100">
                    III. Audit Coverage:<br>
                    <textarea rows="2" cols="80" name="EngDescription"></textarea>
                </div>

                <div class="col-100">
                    IV. Key Controls and Sound Practices<br>
                    <textarea rows="2" cols="80" name="EngDescription"></textarea>
                </div>   

                <div class="col-100">
                    V. Key Issues and Concerns<br>
                    <textarea rows="4" cols="80" name="EngDescription"></textarea>
                </div>
        </div>

        <div id="page2" class="tabcontent">
            <div class="col-100">
                    VI. Project Approach & Methodology<br>
                    <textarea rows="2" cols="80" name="EngDescription"></textarea>
            </div> 
            <div class="col-100">
                VII. Project Activity
            </div>

            <div class ="col-100">
                <div class="col-25">
                    A. Walktrhough:
                </div>
                <div class="col-75">
                </div>
            </div>

            <div class ="col-100">
                <div class="col-25 subCol">
                    A.1. Manhours:
                </div>
                <div class="col-75">
                    <input type="text" placeholder="Estimated Manhours">
                </div>
            </div>
            <div class ="col-100">
                <div class="col-25 subCol">
                    A.2 Target Date:
                </div>
                <div class="col-75">
                    <input type="date">
                </div>
            </div>

            <div class ="col-100">
                <div class="col-25">
                    B. Fieldwork:
                </div>
                <div class="col-75">
                </div>
            </div>

            <div class ="col-100">
                <div class="col-25 subCol">
                    B.1. Manhours:
                </div>
                <div class="col-75">
                    <input type="text" placeholder="Estimated Manhours">
                </div>
            </div>
            <div class ="col-100">
                <div class="col-25 subCol">
                    B.2 Target Date:
                </div>
                <div class="col-75">
                    <input type="date">
                </div>
            </div>

            <div class ="col-100">
                <div class="col-25">
                    C. Reporting:
                </div>
                <div class="col-75">
                </div>
            </div>

            <div class ="col-100">
                <div class="col-25 subCol">
                    C.1. Manhours:
                </div>
                <div class="col-75">
                    <input type="text" placeholder="Estimated Manhours">
                </div>
            </div>
            <div class ="col-100">
                <div class="col-25 subCol">
                C.2 Target Date:
                </div>
                <div class="col-75">
                    <input type="date">
                </div>
            </div>
        </div>    
    </form>
<div>

<script>
    function openPage(evt, pageNumber){
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i=0; i < tabcontent.length; i++){
            tabcontent[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("tablinks");
        for (i=0; i < tablinks.length; i++){
            tablinks[i].className = tablinks[i].className.replace("active","");
        }
        document.getElementById(pageNumber).style.display = "block";
        evt.currentTarget.className += "active";
    }

    document.getElementById("defaultOpen").click();
</script>
</body>
</html>

感谢您的帮助！

2 个答案:

答案 0 :(得分：0)

我注意到您正在调用的页面正在执行另一个由按钮触发的事件，因此您可以通过在evt.preventDefault()函数内添加openPage()来防止默认按钮事件：

function openPage(evt, pageNumber){
    evt.preventDefault();
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i=0; i < tabcontent.length; i++){
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i=0; i < tablinks.length; i++){
        tablinks[i].className = tablinks[i].className.replace("active","");
    }
    document.getElementById(pageNumber).style.display = "block";
    evt.currentTarget.className += "active";
}

（位于enm.php和eauditplan.php上）

答案 1 :(得分：0)

表单内的

按钮的行为类似于type =“ submit”，如果未指定，它将始终提交表单 解决它的一种方法是提及type =“ button”

喜欢

       <button class="tablinks" type="button" onclick="openPage(event, 'page1')" id="defaultOpen">Page 1</button>
        <button class="tablinks" type="button"  onclick="openPage(event, 'page2')">Page 2</button>
相关问题
最新问题