title: popup with jquery ui in asp.net mvc2
body: <p>I work on a project using ASP.NET MVC 2 (C#). I use the jQueryUI JavaScript library to show a popup window to list the different themes in my database. In my view I use the following code:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  $(function () {
      $('#dialog').dialog({
          autoOpen: false,
          width: 600,
          buttons: {
              "Ok": function () {
  
  
                                $("#dialog").dialog("close");
  
  
  
              },
              "Cancel": function () { $(this).dialog("close"); }
          }
      });
      $("#show-dialog").button().click(function () {
          $('#dialog').dialog('open');
          return false;
      });
  });  
  &lt;/script&gt;  
  
  
  &lt;div id="dialog" title="choisir le thème "  &gt; 
  
  &lt;% using (Html.BeginForm())
  { %&gt; 
      &lt;p&gt; &lt;span style="color: #0000FF"&gt;&lt;strong&gt;&lt;em&gt;Titre du document : 
      &lt;%=Html.TextBox("Title")  %&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/span&gt;  &lt;/p&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="width: 184px"&gt;Liste des thèmes &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;   
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td valign="top" style="width: 184px; height: 131px"&gt;
                      &lt;%= Html.ListBoxFor(model =&gt; model.SelectedThème, Model.ThèmeList, new { size = "6" })%&gt; 
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;        
      &lt;/table&gt;     
       &lt;% } %&gt;   
  &lt;/div&gt;
  
  &lt;span id="show-dialog"&gt;thème&lt;/span&gt;   
  &lt;%=Html.TextBox("thème")%&gt; 
  </code></pre>
  
  <p>A popup window opens and the list of themes is shown, but when I select a theme the popup should close and the selected theme should be shown in a text box control.
  help me please</p>
  
  <hr>
  
  <p>so my code will :</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  $(function () {
      $('#dialog').dialog({
          autoOpen: false,
          width: 600,
          buttons: {
              "Ok": function () { $("#thème").val($("#SelectedTheme").val());
                                    $(this).dialog("close"); },
              "Cancel": function () { $(this).dialog("close"); }
          }
      });
      $("#show-dialog").button().click(function () {
          $('#dialog').dialog('open');
          return false;
      });
  });
  
  
  $('#SelectedTheme').change(function () {
      //do whatever you want to do here.
      $("#thème").val($("#SelectedTheme").val());
      $('#dialog').dialog('close');
  
  });
  
  &lt;/script&gt;  
  
  
  
  
  &lt;div id="dialog" title="choisir le thème "  &gt; 
  
   &lt;% using (Html.BeginForm())
   { %&gt; 
  
    &lt;select id="SelectedTheme" multiple="multiple" name="SelectedTheme"&gt;
      &lt;option&gt;item1-in-ThemeList&lt;/option&gt;
       &lt;option&gt;item2-in-ThemeList&lt;/option&gt;
     &lt;/select&gt;
  
  
   &lt;% } %&gt;   
   &lt;/div&gt;  
  
   &lt;fieldset&gt;
  
   &lt;span id="show-dialog"&gt;thème&lt;/span&gt;   &lt;%=Html.TextBox("thème")%&gt; 
   &lt;/fieldset&gt;
  </code></pre>
  
  <p>but when i select a item the popup not close and the value of my text box not change.
  help me !!!</p>