title: JQuery UI Dialog textarea
body: <p>I am trying to put a textarea inside a JQuery UI dialog box.  I want to prepopulate this text area with a value.  If I use <code>&lt;textarea&gt;</code> the dialog box does not even open.  However, if I change it to <code>&lt;input type="text"</code>> then my dialog box works just fine.  I'm not sure if the issue is with the <code>&lt;textarea&gt;</code> itself or putting in the value.  Here is my code.  The issue is the textarea with id "change_dialog_msg". Even just using <code>&lt;textarea&gt;&lt;/textarea&gt;</code> still causes the dialog box not to open.<br>
  The dialog box is being opened from a table with the following code (the exact same code works on another page in my application so I don't think the issue is with that).</p>
  
  <pre><code>&lt;td&gt;&lt;a href="#" onclick="OpenDialog(&lt;bean:write name='cel' property='id' scope="page"/&gt;);return false;"&gt;View/Modify&lt;/a&gt;
  
  &lt;div id="change_dialog" title="Change Email Message" style="display: none; font-size: 12px; text-align: center;"&gt;
              &lt;div style="text-align: left;"&gt;
                  &lt;br&gt;
                  Change the expiration email message for Course ID: "&lt;span id="change_dialog_courseName"&gt;&lt;/span&gt;".
                  &lt;br&gt;
                  &lt;font color="red"&gt;Please enter %fn for first name, %ln for last name, %dt for expiration date, %gn for group, %cn for curriculum, and %sn for stage number.&lt;/font&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;textarea rows="5" cols="50" id="change_dialog_msg"/&gt;
                  &lt;br&gt;&lt;br&gt;
              &lt;/div&gt;
              &lt;button id="change" onclick="ChangeBtn();return false;"&gt;Submit&lt;/button&gt;
              &amp;nbsp;&amp;nbsp;
              &lt;button id="delete" onclick="DeleteBtn();return false;"&gt;Delete&lt;/button&gt;
              &amp;nbsp;&amp;nbsp;
              &lt;button id="cancel" onclick="CancelBtn();return false;"&gt;Cancel&lt;/button&gt;
              &lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              var currId = -1;
              $("#change_dialog").dialog({
                  autoOpen: false,
                  width: "auto",
                  modal: true,
                  resizable: false
              });//.siblings('div.ui-dialog-titlebar').remove();
              function OpenDialog(id){
                  currId = id;
                  $("#change_dialog_courseName").text(courseIDs[id]);
                  $("#change_dialog_msg").val(emailMSG[id]);
                  $("#change_dialog").dialog("open");
              }
              function ChangeBtn(){
                  if(/\S/.test($("#change_dialog_msg").val())){
                      $("#newEmailMSG").val($("#change_dialog_msg").val());
                      $("#id").val(currId);
                      $("#submitOpt").val("Change");
                      $("#emailSettings").submit();
                  } else {
                      alert("You must enter a message when pressing submit.");
                  }                
              }
              function CancelBtn(){
                  currId = -1;
                  $("#change_dialog_msg").val("");
                  $("#change_dialog").dialog("close");
              }
              function DeleteBtn(){
                  if($("#change_dialog_msg").val()==""){
                      $("#change_dialog").dialog("close");
                  } else {
                      $("#id").val(currId);
                      $("#submitOpt").val("Delete");
                      $("#emailSettings").submit();
                  }
              }
          &lt;/script&gt;
  </code></pre>