Home/ Questions/Q 9213815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:50:10+00:00

I’ve got a menu that uses the jQuery toggle function to open and close

  • 0

I’ve got a menu that uses the jQuery toggle function to open and close a sub-menu. This is working perfectly fine in all of my pages, BUT, when I try to add this same menu and sub-menu into a jQuery dialog box it will not open the sub-menu.

Here is my index.php code, including the javascript includes from the <head> of the page:

<script src="javascripts/jq/jquery-1.4.2.min.js"></script>
<script src="javascripts/jq/jquery-v1.8.3.js"></script>
<script src="javascripts/jq/jquery-v1.9.2.js"></script>

<p align="center" id="temp_menuOpener">[Click Here to Toggle Menu]</p>

<div id="temp_menu">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td class="ui-corner-bl ui-corner-br cus-dialog-content"><?php include("includes/menu.php");?></td>
        </tr>
    </table>
</div>

<script>
    $( "#temp_menu" ).dialog({ autoOpen: false, width: 'inherit'});
    $( "#temp_menuOpener" ).click(function() {
    $( "#temp_menu" ).dialog( "open" );
    });
</script>

Here is my menu.php code:

<script>
$(function()
    {
    $('.schedOpener').click(function()
        {
        $('div#submenu_sched').toggle();
        });
    });
</script>

<div id="menu">
    <div class="menu schedOpener">
    <img src="/roster/images/menu/schedule.png" border="0" title="Schedule" alt="Schedule">
    </div>

    <div id="submenu_sched">
        <div class="menu">
        <a href="/roster/sched/sched_month.php" target="_parent"><img src="/roster/images/menu/sched_month.png" border="0" title="Schedule Month View" alt="Schedule Month View"></a>
        </div>
    </div>

</div>

The CSS for submenu_sched is set to display:none;.

So, like I said, this menu works perfectly until it’s added to a dialog box and then it fails. Simply removing id="temp_menu" from the <div> will make it work, but that also removes it from the dialog box.

I tried adding this to a jsfiddle, but I couldn’t get the dialog box to work at all, even when I chose the jQuery 1.8.3 library framework. So instead I set it up on my test server to make it so you can at least see what I mean. You will notice on my test server there is more to the menu, and the page itself, than what I’ve posted here. I am trying to keep the static to noise ratio at a good level 🙂

IWACTITE

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alright, after a while playing around on jsFiddle, I’ve figured all the problems out. First the JavaScript shouldn’t be inside the dialog. Secondly, you have to use ($("#temp_menu").dialog("isOpen") == true) ? $("#temp_menu").dialog("close") : $("#temp_menu").dialog("open"); to compare whether to open or close the dialog.

    Here’s my working jsFiddle
    and here’s the fullscreen version jsFiddle.

    • 0