asp.net - Jquery UI modal form example button click not working -

im using jqueryui modal form , since im new jquery figured first part integrate demo modal form application im working on , progress there.

i have managed other simpler examples working, such basic modal popup box, when try work modal form popup nothing happens.

the css / .js files in correct place , linked properly:

  <link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />   <script type="text/javascript" src="../js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script> 

i took css provided , have placed within own css file know working correctly, can see style applied button etc.

css is:

/* ticket detail popup */  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-dialog .ui-state-error  {     padding: .3em;  }  .validatetips  {     border: 1px solid transparent;     padding: 0.3em;  } 

i have included code demo http://jqueryui.com/demos/dialog/#modal-form so:

   <script>       $(function () {          // workaround flaw in demo system (http://dev.jqueryui.com/ticket/4375), ignore!        $("#dialog:ui-dialog").dialog("destroy");           var name = $("#name"),          email = $("#email"),          password = $("#password"),          allfields = $([]).add(name).add(email).add(password),          tips = $(".validatetips");           function updatetips(t) {             tips             .text(t)             .addclass("ui-state-highlight");             settimeout(function () {                tips.removeclass("ui-state-highlight", 1500);             }, 500);          }           function checklength(o, n, min, max) {             if (o.val().length > max || o.val().length < min) {                o.addclass("ui-state-error");                updatetips("length of " + n + " must between " +                min + " , " + max + ".");                return false;             } else {                return true;             }          }           function checkregexp(o, regexp, n) {             if (!(regexp.test(o.val()))) {                o.addclass("ui-state-error");                updatetips(n);                return false;             } else {                return true;             }          }           $("#dialog-form").dialog({             autoopen: false,             height: 300,             width: 350,             modal: true,             buttons: {                "create account": function () {                   var bvalid = true;                   allfields.removeclass("ui-state-error");                    bvalid = bvalid && checklength(name, "username", 3, 16);                   bvalid = bvalid && checklength(email, "email", 6, 80);                   bvalid = bvalid && checklength(password, "password", 5, 16);                    bvalid = bvalid && checkregexp(name, /^[a-z]([0-9a-z_])+$/i, "username may consist of a-z, 0-9, underscores, begin letter.");                   // jquery.validate.js (by joern), contributed scott gonzalez: http://projects.scottsplayground.com/email_address_validation/                   bvalid = bvalid && checkregexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.)+(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.?$/i, "eg. ui@jquery.com");                   bvalid = bvalid && checkregexp(password, /^([0-9a-za-z])+$/, "password field allow : a-z 0-9");                    if (bvalid) {                      $("#users tbody").append("<tr>" +                      "<td>" + name.val() + "</td>" +                      "<td>" + email.val() + "</td>" +                      "<td>" + password.val() + "</td>" +                   "</tr>");                      $(this).dialog("close");                   }                },                cancel: function () {                   $(this).dialog("close");                }             },             close: function () {                allfields.val("").removeclass("ui-state-error");             }          });           $("#create-user")          .button()          .click(function () {             $("#dialog-form").dialog("open");          });       });    </script> 

i have added code cut down version of code supplied on page linked earlier:

<div class="demo">  <div id="dialog-form" title="create new user">    <p class="validatetips">all form fields required.</p>     <form>    <fieldset>       <label for="name">name</label>       <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />       <label for="email">email</label>       <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />       <label for="password">password</label>       <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />    </fieldset>    </form> </div>    </div><!-- end demo --> 

the final thing have done implement button in place wanted on ui:

<button id="create-user">notify</button> 

the strange thing if copy example page nothing happening when click button, nothing happens if click button own code.

does know why might happening? since im new jquery , web development in general im not seeing happening here.

any advice great thanks

you haven't added part specify event when click button. have wire up.

<script type="text/javascript">    $(function() {      $( "#create-user" )                 .button()                 .click(function() {                     $( "#dialog-form" ).dialog( "open" );                 });   });  </script>