Why does my function tha opens a dialog box only worked once?

Why does my function tha opens a dialog box only worked once?

Newbie here,

I have a button that opens up a dialog box. When "search" in the dialog box is clicked, another dialog box is supposed to open. Everything works great ONE TIME. If I try clicking on the button again, the first dialog box opens, but when I click on "search" again, nothing happens.


first time:

Clicking on "more search options"->Opens Dialog box 1. Clicking "search"-> Opens dialog box 2. Everything is okay!

Second time:

Clicking on "more search options"-> Opens Dialog box 1. clicking "search"-> does nothing!.

Can anyone shed any light on this? thanks.


You can download the css "lightness" theme from http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/

here is the code
  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() {
            $("#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">
    $(function() {
    $(':button').click(function() {
                $('#dialog').dialog('open');
            })
    });
    </script>
    <script type="text/javascript">
    $('#create-user').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>