JS Updates in New Admin Templates (October 2013)

[Pete]

If you are having trouble with a module you've created or are using which is no longer functioning with the new admin themes, this is due to some changes in the admin page markup in the new admin templates.

The class .ui-widget-content is no longer used in the new themes aside from specific modules such as FormBuilder, and some modules used it as a point of reference in jQuery selector statements which will no longer work.

The fix, which maintains backwards compatibility with old themes, is to change the module's .js file to replace this:

.ui-widget-content

 

with this:

.ui-widget-content, .InputfieldContent

Please use this topic to post any other fixes or modules that you encounter issues with relating to JavaScript whilst using the new admin templates.

[ryan]

Also want to add:

1. Same goes for ui-widget-header => InputfieldHeader

2. Most of the time your CSS or JS selectors would not be referring to just "ui-widget-content" or "ui-widget-header", instead it would be a selector string that includes that somewhere, like this selector string ".Inputfields > .Inputfield > .ui-widget-header".

3. That kind of selector string above isn't really necessary with the new classes, as they are single purpose rather than the jQuery UI ones. Meaning, you could just specify "InputfieldHeader" rather than a stack leading up to .ui-widget-header. But for backwards compatibility, you'd specify both the old and the new, separated by a comma, like Pete mentioned. 

4. The old way required some annoyingly specific selectors:  

.InputfieldHeader 

is the same as: 

.Inputfield > .ui-widget-header

and this:

.Inputfield > .ui-widget-header + .ui-widget-content

is the same as

.InputfieldContent

Definitely one of the reasons why we're getting away from those jQuery UI class names. Not jQuery UI's fault, but we were just using them in a way to make PW fields theme-able (something jQuery UI's CSS framework wasn't really meant for). After some time, the only place that's really been worthwhile has been in FormBuilder (we'll keep using it there).