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

I'm doing a web application wherein I do have some side menus. However, I'm encountering some problems when those menus were clicked. It somehow refreshes the whole page. For example, I have the following sub menus under my main menu - "Planning the Engagement":

Engagement Notice Memo
Audit Engagement Plan

When I clicked the Engagement Notice Memo, it works fine. But from this menu, when the second menu was clicked which is the Audit Engagement Plan, the whole pages refreshes and I need to re-click the Audit Engagement Plan for it's forms to show. Same thing happens when I first click the Audit Engagement Plan then followed by the Engagement Notice Memo.

Here is the code wherein the links are located. I used jQuery Ajax to load other php file in this page.

<!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>

Edit: I did notice something, it only happens when enm.php and eauditplan.php are affected/clicked. But when I used to a plain php file it works well.

Here is the code for my enm.php and 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>

Thanks for the help!

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
dshakcsq64956 2018-12-07 07:44
关注
Button inside a form behaves as a type="submit", and will always submit the form if not specified One way to solve it is to mention type = "button"

Like this

<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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

jQuery中的错误/错误Ajax Load（）在单击时刷新屏幕 ajax html5 jquery php
2018-12-07 03:55

回答 2 已采纳 Button inside a form behaves as a type="submit", and will always submit the form if not specified
单击提交按钮时，使用jquery / AJAX提交表单无效 ajax html jquery php
2015-12-30 12:15

回答 3 已采纳 jQuery is only aware of the elements in the page at the time that it runs, so new elements added t
使用Jquery / Ajax将页面加载到Div中（单击功能不起作用） ajax html javascript jquery php
2017-10-09 02:25

回答 3 已采纳 Looks like I found the real reason of your error. Take a look at your link <li><a href="
php jquery ajax刷新div,使用jquery / ajax刷新/重新加载Div中的内容
2021-04-09 11:36

阿喵看海外的博客使用jquery / ajax刷新/重新加载Div中的内容我想点击一个按钮重新加载一个div。我不想重新加载整页。这是我的代码：HTML：单击按钮时，....应重新加载而不加载或刷新整页。下面是我试过的Jquery，但没有工作： -$("#...
关于AJAX实现网页中某个div模块的局部刷新 ajax django html
2022-03-16 21:42

回答 1 已采纳给 live.html 加路由了没有
如何使用Ajax在按钮单击时将值发布到控制器功能并同时重定向到新页面？ ajax javascript jquery php
2016-06-26 23:47

回答 2 已采纳 Your javascript should be something like this <script type="text/javascript"> $(function(){
单击按钮以在jQuery中对表进行排序 javascript jquery mysql php
2013-11-26 18:59

回答 3 已采纳 Here is a demo how you can accomplish this try adding anchor in your <th> elements use title
jquery ajax加载页面进度条,在单页网站中使用jquery ajax加载页面时显示进度条
2021-08-05 18:10

金城七的博客每当用户单击导航链接时，它都会用于.load将页面内容加载到包装div中。$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});$(this).ajaxEnd(function(){$('...
单击时通过JQuery传递给PHP脚本的表值 ajax javascript jquery php
2014-09-17 21:36

回答 2 已采纳 What I ended up doing is added an ID to the table object with the cluster name: ... <td class=
单击时使用ajax调用重新加载数据表数据 ajax javascript jquery php
2013-11-15 14:27

回答 1 已采纳 you should be able to accomplish this by using fnServerData instead of fnServerParams var oTable
使用按钮单击执行的Jquery函数 html jquery php
2016-11-07 21:08

回答 3 已采纳 Try targeting the button through a attribute selector and make it wait until the DOM is loaded. $(
jquery框架的ajax,jQuery框架事件/AJAX
2021-08-05 22:45

weixin_39998906的博客 Day3 事件一、jQuery中事件的添加方式1、简单的事件添加方式(必须会)：1)格式：jQuery对象.事件名(事件函数)；2)注意：如果事件名相同，那么后面的事件不会覆盖前面的事件2、 bind方式添加事件：该方式添加事件的...
单击“提交”按钮时如何仅加载内容区域？ ajax html javascript jquery php
2016-02-05 04:48

回答 3 已采纳 you need to use ajax. please try this instead before submit <!DOCTYPE html> <html&g
html中自动加载ajax方法,jQuery Ajax之load()方法
2021-06-09 14:06

韩德雨的博客 jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是laod()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。load()方法是jQuery中最为简单和常用的Ajax方法，能载入...
ajax load 设置同步,Jquery：在ajax load（）之后运行脚本
2021-08-05 22:42

风的决意的博客我正在使用load()函数通过单击菜单中的按钮从不同页面动态获取详细信息。其中一个按钮指向使用自己的jquery效果的图像库。但那些脚本没有运行。我尝试使用getscript()显式加载它们，但这也不起作用。这是代码：$...
没有解决我的问题, 去提问

悬赏问题

¥20 有关区间dp的问题求解
¥15 多电路系统共用电源的串扰问题
¥15 slam rangenet++配置
¥15 有没有研究水声通信方面的帮我改俩matlab代码
¥15 对于相关问题的求解与代码
¥15 ubuntu子系统密码忘记
¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
¥15 保护模式-系统加载-段寄存器
¥15 电脑桌面设定一个区域禁止鼠标操作
¥15 求NPF226060磁芯的详细资料

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

2条回答 默认 最新

悬赏问题

2条回答默认最新