title: jquery button and modal form
body: <p>I'm trying to create a form when someone clicks an "Edit" button.  I'm following this example:
  <a href="http://jqueryui.com/demos/dialog/modal-form.html" rel="nofollow">http://jqueryui.com/demos/dialog/modal-form.html</a></p>
  
  <p>I have two problems:</p>
  
  <ol>
  <li><p>The button looks like a regular html button.  When I click, it turns into the jquery button.  Then I click again and the dialog opens up.  Obviously I just want the jquery button that I click once to open the dialog.</p></li>
  <li><p>My form shows up on the main page AND when you click the edit button to open the dialog.  It shouldn't show up in the main page.  It should only exist in the dialog.  But from this tutorial (http://jqueryui.com/demos/dialog/modal-form.html) I fail to see them hiding the form, so I'm not sure how they do it.</p></li>
  </ol>
  
  <p>My html form:</p>
  
  <pre><code>&lt;div id="dialog-form" title="Change camera settings"&gt;
          &lt;form&gt;
          &lt;fieldset&gt;
              &lt;label for="camera_name"&gt;Camera Name&lt;/label&gt;
              &lt;input type="text" size="16" maxlength="32" name="camera_name" id="camera_nameid" class="text ui-widget-content ui-corner-all" /&gt;
          &lt;/fieldset&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My button (which is in another table showing all the cameras):</p>
  
  <pre><code>&lt;button id="editbutton" onClick='edit(this, "&lt;?php echo htmlentities($_SERVER['REQUEST_URI']); ?&gt;", "&lt;?php echo $result_cameras[$i]["camera_name"]; ?&gt;", "&lt;?php echo $camera_quality; ?&gt;")'&gt;Edit&lt;/button&gt;
  </code></pre>
  
  <p>My jquery code. It still needs more work but just has one thing I'm processing which is camera_name:</p>
  
  <pre><code>function edit(t, to, cameraname, cameraquality,)
  {
  var js = jQuery.noConflict();
  js(function() {
      var name = js( "#camera_name" );
      allFields = js( [] ).add( name );
      js("input:text").val(cameraname); //fill in the current data for cameraname
  
      js( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
              "Edit camera settings": function() {
                  allFields.removeClass( "ui-state-error" );
  
              },
              Cancel: function() {
                  js( this ).dialog( "close" );
              }
          },
          close: function() {
              allFields.val( "" ).removeClass( "ui-state-error" );
          }
      });
  
      js( "#editbutton" )
          .button()
          .click(function() {
              js( "#dialog-form" ).dialog( "open" );
          });
  });
  }
  </code></pre>