making a diolog box open another dialog box... Why does it only work once?

making a diolog box open another dialog box... Why does it only work once?

hello,

I am trying to get a dialog box to open another dialog box.  Clicking on "more search options" the first time results in opening a dialog box.  Clicking "search" within the dialog box results in opening up a second dialog box.  But this only works the first time I click on "more search options".  In other words,  the second dialog box only opens up only once.  To get the second dialog to open again, I have to reload the page in the browser.  Does anyone have any idea why this is happening?  If the problem is not clear, please ask me to elaborate.  Any help is appreciated

You can download the CSS and jquery code from http://jqueryui.com/download

  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" />
    <title>Untitled Document</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
            <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        }
        
        
        
        );
        </script>
        <script type="text/javascript">

        $(document).ready(function(){
            $("#dialog").dialog({
                bgiframe: true,
                modal: true,
                width: 400,
                autoOpen: false,
                
                buttons: {
                    Search: function() {
                        $(this).dialog('close');
                        doSomething();
                        closeWindow();
                    }
                }
            });
        });
        
        
        function doSomething() {
            $(document).ready(function(){
            $("#dialog2").dialog({
                bgiframe: true,
                modal: true,
                width: 300,
                height: 300,
                buttons: {
                    Ok: function() {
                        $(this).dialog('close');
                    }
                }
            
    });
    });
       function closeWindow() {
           
           $("#dialog").dialog('close');
    }
        }
        
        
        </script>
    <script type="text/javascript">


    $(document).ready(function() {
    $(':button').click(function() {
                $('#dialog').dialog('open');
            })
    });
    </script>

        <style type="text/css">
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain {  width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
            .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
        #dialog2 {display: none;}    
            
        </style>

    </head>

    <body>
    <div class="demo">

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            
        </ul>
        <div id="tabs-1">
            <p><table>
       <tr>
        <td>
        Book 1: <input type="text" name="ISBN1" id="ISBN2"/>
        <button id="create-user" class="ui-button ui-state-default ui-corner-all">More Search Options</button>
        </td>
        <td>
        Book 2:<input type="text" name="lastname" />
        <button id="create-user" class="ui-button ui-state-default ui-corner-all">More Search Options</button>
        </td>
       </tr>
    </table>

    </p>
        </div>
        <div id="tabs-2">
            <p>Morbi </p>
        </div>
        
    </div>

    </div><!-- End demo -->

    <div style="display: none;" class="demo-description">

    <p>Click tabs to swap between content that is broken into logical sections.</p>

    </div><!-- End demo-description -->

    <!-- Search dialog box-->

    <div id="dialog" title="Download complete">
        <form>
        <fieldset>
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
            <label for="author">Author</label>
            <input type="text" name="author" id="author" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">Keyword</label>
            <input type="keyword" name="keyword" id="keyword" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>

    </div>
    <!-- End of search dialog box-->
    <!-- beginning of results dialog box-->
    <div id="dialog2">
    dialog box 2!!!
        </div>

    </div>

    </div>


    </body>
    </html>