Question

Im using the JqueryUI modal form and since im new to Jquery I figured the first part would be to integrate the demo modal form into the application im working on and then progress from there.

I have managed to get other simpler examples working, such as the basic modal popup box, but when I try to work with this modal form popup nothing happens.

The CSS / .js files are in their correct place and 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 the CSS provided and have placed that within my own CSS file which I know is working correctly, I can see the style applied to the 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 the code from this demo exactly http://jqueryui.com/demos/dialog/#modal-form like so:

   <script>
      $(function () {
         // a workaround for a flaw in the 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 be between " +
               min + " and " + 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 an 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 with a letter.");
                  // From jquery.validate.js (by joern), contributed by 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. [e-mail]");
                  bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only 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 then added this code which is a cut down version of the code supplied on the page i linked earlier:

<div class="demo">

<div id="dialog-form" title="Create new user">
   <p class="validateTips">All form fields are 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 I have done is to implement the button in the place I wanted it on my UI:

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

The strange thing is even if i copy the example exactly into my page I get nothing happening when I click the button, just as nothing happens if i click the button with my own code.

Does anyone know why this might be happening? Since im fairly new to Jquery and web development in general im not really seeing what could be happening here.

Any advice would be great
Thanks

Answer 1

Thanks for the help guys

After some experementation it seems that the Form tags were possibly conflicting with another form elsewhere in the page, I removed these and the problem seemed to go away!