Question

我有一个名为index.html的网页。在它上面，我有一个菜单，下面有两个选项：

┏━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━┓
┃   Classes   ┃ Update calendar ┃
┗━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━┛

然后我有一个空div，其中我放置了页面的内容：

<div id="content"></div>

还有一个外部JavaScript文件（menu.js），用于管理菜单选项。 ^{（以下代码）}

然后，在calendar.php我存储了两个控件：日历和登录表单。 ^{（下面的代码）}
这个想法是：

当用户点击Update calendar选项时，calendar.php将加载到内容div中，但只会显示登录表单。
当用户点击Classes选项时，calendar.php将加载到内容div中，但只会显示日历。

我目前正在使用$(selector).load(url)加载calendar.php（见下文） Update calendar选项按预期工作，
但是当我点击Classes时，两个日历和登录表单都会显示。

menu.js

<script type="text/javascript">
    $(document).ready(function(){
        var sections = $("#menu li");
        var loading = $("#loading");
        var content = $("#content");

        sections.click(function(){ //When the user clicks an option...
            showLoading(); //show the loading bar

            switch(this.id) {
                case "classes"://if the Classes option is clicked...
                    content.load("calendar.php", hideLoading); break;

                case "classes_update"://if the Update calendar option is clicked...
                    content.load("calendar.php #section_update", hideLoading); break;

                default: //if nothing is clicked...
                    hideLoading(); break;
            }
        });
    });
</script>

calendar.php

<head>
    <!-- links to JQuery resources -->

    <script type='text/javascript'>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                }
            });
        });
    </script>

    <!-- other calendar styles -->
</head>
<body>
    <div id="calendar"></div> <!-- calendar area -->

    <div id="section_update"> <!-- login form area -->

        <!-- form stuff -->

    </div>
</body>

Answer 1

在网上挣扎并搜索ajax / jquery信息后，我发现似乎给了我一些希望。瞧!!它奏效了。

在“Classes”菜单选项的switch语句代码中的 menu.js 页面上，我使用了一个ajax回调函数，只需设置登录表单的html属性成为像这样的空div

$（ '＃section_update'）的html（ ''）;

这就是诀窍！

谢谢大家，特别感谢“jmendeth”帮助我重新格式化我的问题，以便更好地理解！。

AJAX加载函数，重新定义代码以显示页面的特定部分

1 个答案: