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");
  }

I don't think it's really "Bad" to re-instantiate the dialog, but as with most things in programming if you can do something only once you probably should. One thing to note, though: I'm pretty sure specifying auto-open as true and then calling open is redundant. — Toji
– Toji, Commented Sep 24, 2009 at 17:45
I had a similar situation and applied my class to the parent and the css was applied. Thanks! — Isa
– Isa, Commented Mar 3, 2020 at 21:42

Toji · Accepted Answer · 2009-09-24 16:59:12Z

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!

Craig Stuntz · Accepted Answer · 2009-09-24 17:01:13Z

0

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.

answered Sep 24, 2009 at 17:01

Craig Stuntz

127k12 gold badges257 silver badges275 bronze badges

Collectives™ on Stack Overflow

Css class added but not rendering when applied with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related