title: Changing color of header of a jquery dialog box while other dialog boxes are open and we don't want them to change
body: <p>I have edit/update dialog box which is made by jquery and is open and after the user clicks on the submit button I want to show the result of action with another jquery dialog box. Problem is that I want the header color of result dialog box change based on the result (whether it is successful or failed). And it either works and make the colors of all dialog boxes currently open change to that specific color or it doesn't work at all. here's the code:</p>
  
  <p>This is the css :</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .ui-widget-header {
      color:white;
      background:#012567;
      font-family:Tahoma;
      font-weight:bold;
  }
  
  .ui-exclamation-message{
      background:#c2c80d;
  }
  
  .ui-success-message{
      background:#066417;
  }
  
  .ui-failed-message{
      background:#670500;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>This is the jQuery part :</p>
  
  <pre><code>function message_dialog_open() {
  
      switch ($("#messageType").attr("value").toString())
      {
          case "Exclamation":
              $(".ui-widget-header").addClass("ui-exclamation-message");
              break;
          case "Failed":
              $(".ui-widget-header").addClass("ui-failed-message");
              break;
          case "Success":
              $(".ui-widget-header").addClass("ui-success-message");
              break;
      }
  
      $(".message-dialog-window").dialog("open");
  }
  </code></pre>
  
  <p>This is the razor part :</p>
  
  <pre><code>@using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "message-dialog-window", HttpMethod = "POST", OnSuccess = "message_dialog_open" }))
  </code></pre>
  
  <p>This is the controller/action part :</p>
  
  <pre><code>[HttpPost]
  public PartialViewResult Edit(T_account newAccount)
  {
              var _result = new account().UpdateAccount(newAccount);
              if (_result == false)
                  return PartialView("_Message", new Message { type = MessageType.Failed, text = "failure message" });
              return PartialView("_Message", new Message { type = MessageType.Success, text = "success message" });
  </code></pre>
  
  <p>And finally here's the html part:</p>
  
  <pre><code>&lt;div class="dialog-window edit-dialog-window" id="edit-dialog-window" title="update account information"&gt;&lt;/div&gt;
  
  &lt;div class="dialog-window message-dialog-window" id="message-dialog-window" title="Request's result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The message type attribute would be stored in a hidden input on _Message partial view. and in jquery based on that value I try to change the color of ui-widget-header by adding the proper class. the problem is when I try to add the class by this selectot : $(".ui-widget-header").addClass("ui-success-message");</p>
  
  <p>The program would add that class to every element with "ui-widget-header" class. meaning all the previously open dialogue boxes would also have their header's color change. and if try to use this selector : $("div#message-dialog-window .ui-widget-header").addClass("ui-success-message"); it doesn't work because appreantly the header elements are not part of div#message-dialog-window. which they should be because of ajaxOption : UpdateTargetId = "message-dialog-window" which I used when I wanted to use ajax form. </p>
  
  <p>I would appreciate if any one could tell what's going on. or how can I get what I want in any other way.</p>
  
  <p>PS: sorry for my long post and bad english :)</p>