title: Prevent jQuery UI dialog from setting focus to first textbox
body: <p>I have setup a jQuery UI modal dialog to display when a user clicks a link.  There are two textboxes (I only show the code for 1 for brevity) in that dialog div tag and it is changed to be a jQuery UI DatePicker textbox that reacts on focus.</p>
  
  <p>The problem is that the jQuery UI dialog('open') somehow triggers the first textbox to have focus, which then triggers the datepicker calendar to open immediately.</p>
  
  <p>So I am looking for a way to prevent the focus from happening automatically.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;&lt;a id="lnkAddReservation" href="#"&gt;Add reservation&lt;/a&gt;&lt;/div&gt;
  
  &lt;div id="divNewReservation" style="display:none" title="Add reservation"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /&gt;&lt;/th&gt;
              &lt;td&gt;
                  &lt;asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;div&gt;
          &lt;asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var dlg = $('#divNewReservation');
          $('.datepicker').datepicker({ duration: '' });
          dlg.dialog({ autoOpen:false, modal: true, width:400 });
          $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
          dlg.parent().appendTo(jQuery("form:first"));
      });
  &lt;/script&gt;
  </code></pre>