Nested modal dialog from tabbed modal dialog issue

Nested modal dialog from tabbed modal dialog issue

Hello.  I've been having some problems trying to figure this out.  I am pretty new to jQuery (2 months) so I thought it best to ask this question in here.  I tried previously to ask this question but it seemed to have disappeared.  Apologies if my posting this again results in a double post.

The issue has to do with a select box control not refreshing in a modal dialog that is launched from another modal dialog containg tabs.  I guess the best way to explain is to include some code I've been using to test this.  I have sandboxed the following php pages and will explain how to replicate the behavior below:

main_page.php ----------------------------------------------------------------------------------------------------------

  1. <!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" />
            <meta http-equiv="cache-control" content="no-cache" />
            <link rel="stylesheet" type="text/css" href="../css/custom-theme/jquery-ui-1.8.custom.css" media="screen" />
            <script type="text/javascript" language="javascript" src="../js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
            <script type="text/javascript" language="javascript" src="../js/jquery.form.js"></script>
            <script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.custom.min.js"></script>
            <script type="text/javascript" language="javascript" src="../js/jquery.selectboxes.js"></script>
            <script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                    $('#view-button')
                    .button()
                    .click(function() {
                        $(this).removeClass("ui-state-focus");
                        $("#recordDialog").dialog({
                            modal: true,
                            height: 350,
                            width: 450,
                            autoOpen: false,
                            stack: true,
                            title: 'Viewing A Record',
                            close: function() {
                                $(this).dialog('destroy');
                            }
                        }).load('record_dialog.php').dialog('open');
                    });
                });
            </script>
        </head>
        <body>
            <div>
                <br/>
                <button id="view-button">View Record</button>
            </div>
            <div id="recordDialog" style="display:none;"></div>
        </body>
    </html>








































record_dialog.php ------------------------------------------------------------------------------------------------------

  1. <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#the-tabs").tabs({ cache: false });
        });
    </script>
    <div id="the-tabs">
        <ul>
            <li><a href="tab_a.php">TAB A</a></li>
            <li><a href="tab_b.php">TAB B</a></li>
        </ul>
    </div>











tab_a.php -------------------------------------------------------------------------------------------------------------


  1. <h3>Tab A</h3>

tab_b.php -------------------------------------------------------------------------------------------------------------


  1. <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#select_stuff").ajaxAddOption("select_stuff.php", { }, false,
                function(data) {
                    $("#select_stuff").val(<?php echo $_GET["id"]; ?>);
                }
            );
        });
    </script>
    <h3>Tab B Selection - id = <?php echo $_GET["id"]; ?></h3>
    <br/>
    <br/>
    <select id="select_stuff"/></select>













tab_b_select.php -------------------------------------------------------------------------------------------------------

  1. <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#edit-somthing')
            .button()
            .click(function() {
                $(this).removeClass("ui-state-focus");
                $("#anotherDialog").dialog({
                    modal: true,
                    height: 300,
                    width: 450,
                    autoOpen: false,
                    stack: true,
                    title: 'Selecting Stuff',
                    close: function() {
                        $(this).dialog('destroy');
                    }
                }).load('tab_b_select.php?id=' + $('#select_id').val()).dialog('open');
            });
        });
    </script>
    <h3>Tab B</h3>
    <div>
        <br/>
        Enter Selection (1 -3 to preselect):<input id="select_id"></input><br/>
        <button id="edit-somthing">Edit Stuff</button>
    </div>
    <div id="anotherDialog" style="display:none;"></div>



























select_stuff.php -------------------------------------------------------------------------------------------------------

  1. <?php
        echo '{';
        echo '"-1":"-- SELECT --",';
        echo '"1":"THIS STUFF",';
        echo '"2":"THAT STUFF",';
        echo '"3":"OTHER STUFF",';
        echo '}';
    ?>








END CODE ---------------------------------------------------------------------------------------------------------------

To replicate the problem:

1.  open main_page.php
2.  click "View Record" button to launch the "Viewing A Record" dialog
3.  click "Tab B"
4.  enter 1-3 in the input box if desired
5.  click "Edit Stuff" button

"Selecting Stuff" dialog appears with select box preselected if you entered 1-3 in step 4.  At this point the options are in the select box, thats really all that counts.  Works good so far.

6.  close the "Selecting Stuff" dialog.

You can now repeat steps 4-6 and the options are populated in the select box.  So far so good.

7.  close the "Selecting Stuff" dialog again
8.  click "Tab A"
9.  click "Tab B"
10. repeat step 4 and step 5

At this point the select box on the "Selecting Stuff" dialog does not populate with the options.  This is the issue I have been trying to resolve.

Here are some notes on the behvior of this I have noticed:

1.  the first time through (steps 1-6) everything is ok
2.  at step 6, you can repeat steps 4-6 and its all ok
3.  once you navigate to "Tab B" then to "Tab A" and then back to "Tab B", the select box will not populate
4.  the behavior in note 3 is the same even if you don't open the "Selecting Stuff" dialog after the first tine you navigate to "Tab B"

Basically it seems as though once you load the contents of "Tab B" and leave and come back to "Tab B", this is where the issue occurs.

You can reset everything by closing the "Viewing A Record" dialog and relaunching it and so long as you never navigate off of "Tab B" everything is ok.

I know this is a long question but its actually pretty straight forward.  Just wanted to present the behavior I have encountered.  I am thinking there is something really simple I am missing here but as I have only been working with jQuery for about two months now, this is really the first time I've gotten stuck.

Any help or advice whould be greatly appreciated.  main_page.php shows the versions of the jQuery components I am using.  If any other information is required, please let me know.

Thanks everyone the time and help.