Home/ Questions/Q 8699797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:02:08+00:00

I’m new to JQuery UI Dialogs and using .Toggle() to display information inside the

  • 0

I’m new to JQuery UI Dialogs and using .Toggle() to display information inside the dialog box and I’m having unexpected behaviour.

The dialog box is instatiated once, but the code that displays (hide/show) in the dialog box is contained within a function that can be called many times, depending on the user actions.

Here’s the test html + javascript code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Online Booking Form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
<script type="text/javascript">
$(document).ready(function(){

    var dialog = $( "#dialog-modal" ).dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        height: 'auto',
        width: 340,
        maxWidth: 340,
        minWidth: 340,
        close: function() { $('#requal_detailed_info').css("display", "none"); }
    });

    function loadRequalInfo() {
        dialog.dialog('open');

        $('#requal_toggle').click(function() {
            $('#requal_detailed_info').toggle(function() {
            });
        });

        return false;
    }

    $('#test1').click(function() {
        loadRequalInfo();
    });
    $('#test2').click(function() {
        loadRequalInfo();
    });
    $('#test3').click(function() {
        loadRequalInfo();
    });
    $('#test4').click(function() {
        loadRequalInfo();
    });
    $('#test5').click(function() {
        loadRequalInfo();
    });
    $('#test6').click(function() {
        loadRequalInfo();
    });
});
</script>
</head>
<body>
<div class="bodycopy" id="dialog-modal" title="Test Message Box" style="display:none;">
    <div class="requal" id="requal_default_info"><p>MESSAGE SHOWN ON DIALOG DISPLAY</p></div> 
    <div class="requal_open" id="requal_toggle">Please click here</div>
    <div class="requal" id="requal_detailed_info" style="display:none" ><p><hr /></p><p>MORE INFORMATION 1</p><p>MORE INFORMATION 2</p><p>MORE INFORMATION 3</p><p>MORE INFORMATION 4</p></div>
</div>
<div class="requal" id="test1" name="test1">Test 1</div><br />
<div class="requal" id="test2" name="test2">Test 2</div><br />
<div class="requal" id="test3" name="test3">Test 3</div><br />
<div class="requal" id="test4" name="test4">Test 4</div><br />
<div class="requal" id="test5" name="test5">Test 5</div><br />
<div class="requal" id="test6" name="test6">Test 6</div><br />
</body>
</html>

Expected behaviour:

1) Click on “Test 1” – Dialog opens showing default message.
2) click “Please click here”, a hidden is then shown displaying “More infomation 1,…..”.
3) The default message + extra info is kept displayed until either a user clicks the “X” or the “Please click here” div to hide the extra information.

4) Close the dialog, and repeat the above 3 steps again on either “Test 1”, “Test 2”, etc…

What is actually happening! (Replication steps)

Refresh the browser page.

1) Click on “Test 1” – Dialog opens showing default message.
2) click “Please click here”, a hidden is then shown displaying “More infomation 1,…..”.
3) The default message + extra info is kept displayed until either a user clicks the “X” to close the dialog or the “Please click here” div to hide the extra information.

4) When the dialog is closed for the first time.
5) Click on any “Test 1”, “Test 2” texts again, to bring the dialog box up again. Click the “Please click here”, the extra information show appear and stay on screen, until the users closes the dialog box or presses “Please click here” again.

Two different scenarios have occurred, but it is random which one occurs on a page refresh:
a) When the dialog box is displayed for a 2nd time the extra information is never shown when clicking “Please click here”. When the dialog box is closed, then displayed for a 3rd time, the extra information is shown.

b) When the dialog box is displayed for a 2nd time, when clicking “Please click here”, the extra information is shown, then immediately disappears. Closing the dialog box and displaying the dialog box again, the extra information is shown/hides/shown/hides immediately, etc……

I’m at loss on how to get the expected behaviour, where a user can click and display the dialog box many times and the hide/show of the extra information stays displayed until the dialog box is closed or “Please click here” is clicked (many times or just once) and then the dialog box is closed.

So any help will be appreciated.

Cheers in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are binding click event every time in loadRequalInfo(). Which mean you are adding more click events.

    Better remove existing and add

    Try this

     function loadRequalInfo() {
    dialog.dialog('open');
    $('#requal_toggle').unbind('click'); // remove old if anything bound
    $('#requal_toggle').click(function() {
        $('#requal_detailed_info').toggle(function() {
        });
    });

    return false;
}
    • 0