Home/ Questions/Q 5985993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:36:34+00:00

I have a page named index.html . On it, I have a menu with

  • 0

I have a page named index.html. On it, I have a menu with the 2 options below:

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

And then I have an empty div where I put the contents of the page:

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

There’s also an external JavaScript file (menu.js) which manages the menu options. (code below)

Then, on calendar.php I store two controls: a calendar and a login form. (code below)
The idea is:

  • when the user clicks on the Update calendar option, calendar.php will be loaded into the contents div but only the login form will show.
  • when the user clicks on the Classes option, calendar.php will be loaded into the contents div but only the calendar will show.

I’m currently using $(selector).load(url) to load calendar.php (see below).
The Update calendar option works as expected,
but when I click on Classes, both calendar and login form show up.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After struggling and scouring the ajax/jquery information on the web, I spotted what seemed to give me some hopes. And voila!! it worked.

    On the page menu.js in the switch statement code for “Classes” menu option, I used an ajax callback function and simply set the html property of the login form to be an empty div like this

    $(‘#section_update’).html(”);

    And that did the trick!

    Thank you all, and my special thanks to “jmendeth” who helped me reformat my question so it can be better understood!.

    • 0