Ошибка / Ошибка в jQuery Ajax Load () обновляет экран при нажатии - PullRequest
Новая
       1

Ошибка / Ошибка в jQuery Ajax Load () обновляет экран при нажатии

0 голосов
/ 07 декабря 2018

Я делаю веб-приложение, в котором у меня есть некоторые боковые меню.Тем не менее, я столкнулся с некоторыми проблемами при нажатии на эти меню.Это как-то обновляет всю страницу.Например, у меня есть следующие подменю в моем главном меню - «Планирование помолвки»:

  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 голосов
/ 07 декабря 2018

Кнопка внутри формы ведет себя как 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>
0 голосов
/ 07 декабря 2018

Я заметил, что страница, которую вы вызываете, выполняет другое событие, которое вызывается кнопкой, поэтому вы можете предотвратить событие кнопки по умолчанию, добавив 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)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...