Css class added but not rendering when applied with jQuery

Question

I'm having a peculiar problem. I'm able to add a css class to a DIV, but the styles are not rendered.

UPDATE

I finally found the problem.

With the code I originally used, I added the class to the 'myDialog' div. What I nedded to do, was to add the class to the parent div which $.dialog creates (to wrap my dialog div).

Once this was done, my dialogbox was rendered corectly. Here is the code I use:

  //Instantiate dialog      
  jQuery("#dialog").dialog({ modal:true, autoOpen:false });

  function processRegistration(instanceID, formData)
  {
    jQuery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'processRegistration', formData : formData, instanceID : instanceID },
      function(feedback)
      {
        jQuery('#dialog').text(feedback.message);
        jQuery('#dialog').parent().addClass(feedback.type);
        jQuery('#dialog').dialog('open');
      },"json");
  }

Answer 1

Couple of things to look out for that consistently bite me when doing dynamic styles like this:

1) Make sure that your CSS file is included AFTER jQuery's and/or whatever theme files you may be using. They could be overruling your style, and the last file to be included is the one that "wins" style conflicts.

2) Make sure your style is actually valid and being included. Apply it to a static element and make sure it looks how you expect. I noticed in the css you showed that you have a "'" before #dialog and no closing "}" on the .ui-dialog style, both of which could break the file as a whole. I'm guessing that those were just a copy-paste goof, but you should double check just in case. I've had many instances where I thought jQuery was killing my style only to find out the style was broken from the start, or that I had put it in a file that wasn't even being included.

Oh! Hey! Another thing I just noticed. YOU are overwriting your fail style! Try moving your .ui-dialog style above your .fail style in the css and see if you get different results. Your .ui-dialog style may be resetting the background to transparent. Remember: in CSS the last style defined always wins!

Answer 2

To be precise, the strikethrough in the Firebug CSS list doesn't quite mean the styles are "canceled"; it means they have been superseded by another style elsewhere. Whatever that is should also appear in the list. It sounds like a class is being applied as you expect, but does not have the effect you are expecting because there is some more specific styling applied in a different bit of CSS or in a style explicitly applied to the elements.