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提交表单无效 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="
关于AJAX实现网页中某个div模块的局部刷新 ajax django html
2022-03-16 21:42

回答 1 已采纳给 live.html 加路由了没有
使用asp.net mvc和jquery在按钮单击上加载更多数据？
2021-04-04 07:21

在ASP.NET MVC框架中，开发Web应用程序时，我们经常需要处理大量的数据，而为了提高用户体验，我们会采用分页或延迟加载（懒加载）技术。标题“使用asp.net mvc和jquery在按钮单击上加载更多数据？”正是针对这种...
如何使用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传递给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=
php jquery ajax刷新div,使用jquery / ajax刷新/重新加载Div中的内容
2021-04-09 11:36

阿喵看海外的博客使用jquery / ajax刷新/重新加载Div中的内容我想点击一个按钮重新加载一个div。我不想重新加载整页。这是我的代码：HTML：单击按钮时，....应重新加载而不加载或刷新整页。下面是我试过的Jquery，但没有工作： -$("#...
单击时使用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. $(
单击“提交”按钮时如何仅加载内容区域？ 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
ajax load 设置同步,Jquery：在ajax load（）之后运行脚本
2021-08-05 22:42

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

金城七的博客每当用户单击导航链接时，它都会用于.load将页面内容加载到包装div中。$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});$(this).ajaxEnd(function(){$('...
html中自动加载ajax方法,jQuery Ajax之load()方法
2021-06-09 14:06

韩德雨的博客 jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是laod()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。load()方法是jQuery中最为简单和常用的Ajax方法，能载入...
jquery框架的ajax,jQuery框架事件/AJAX
2021-08-05 22:45

weixin_39998906的博客 Day3 事件一、jQuery中事件的添加方式1、简单的事件添加方式(必须会)：1)格式：jQuery对象.事件名(事件函数)；2)注意：如果事件名相同，那么后面的事件不会覆盖前面的事件2、 bind方式添加事件：该方式添加事件的...
没有解决我的问题, 去提问

悬赏问题

¥15 DS18B20内部ADC模数转换器
¥15 做个有关计算的小程序
¥15 MPI读取tif文件无法正常给各进程分配路径
¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题求各位帮我解答一下
¥15 setInterval 页面闪烁，怎么解决
¥15 如何让企业微信机器人实现消息汇总整合
¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
¥15 如何用Python爬取各高校教师公开的教育和工作经历
¥15 TLE9879QXA40 电机驱动

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

2条回答 默认 最新

悬赏问题

2条回答默认最新