Home/ Questions/Q 839047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T05:24:12+00:00

I’m trying to display a modal form using jquery ui. I’ve adapted an example

  • 0

I’m trying to display a modal form using jquery ui. I’ve adapted an example but I cannot get the dialog to launch. I’m sure it’s very simple but can someone tell me what I’m doing wrong ?

The page displays initially but when I click on ‘Create New User’ nothing happens.

The code is below – also (easier to read) at http://pastie.org/1000263 .

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>jQuery UI Example Page</title>
  <link type="text/css" href="jquery-ui-1.7.3.custom/css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-ui-1.7.3.custom.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $("#dialog-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
     'Create an account': function() {
      var bValid = true;
      allFields.removeClass('ui-state-error');

      if (bValid) {
       alert(name.val());
       $(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>

  <style type="text/css">
   /*demo page css*/
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
  </style> 
 </head>
 <body>
 <h1>Welcome to jQuery UI!</h1>

 <p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p>
   <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>  
   <button id="create-user">Create new user</button>
 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code worked fine when I removed .button()

       $('#create-user')
    .click(function() {
     $('#dialog-form').dialog('open');
    });

    I’m not really sure what .button() does anyways. I’m not sure I’ve seen it before.

    The javascript console in chrome said:
    “Uncaught TypeError: Object # has no method ‘button'”

    The javascript console will be very useful for “why things don’t work”.

    • 0