Problem getting css class added to element.

[nelsonm]

hi all,

i have this button set in the following html segment. The set is part of a jquery dialog. I'm trying to add a class to but the first button in the set but it does not appear in firebug. Can someone tell me what's wrong with my selector?

$('#workorder-window.ui-dialog-buttonset button').first().addClass('submit');

It's included in the jquery dialog definition that follows:

$('#workorder-button').click(function() {$('#workorder-window').dialog({
open: function(event, ui) {$('#workorder-window.ui-dialog-buttonset button').first().addClass('submit');
$('#workorder-window').validationEngine('attach', {promptPosition : 'topLeft', scroll: false});},
close: function(event, ui) {$('#workorder-window').validationEngine('hideAll');},
buttons: {'Submit': function() {if (jQuery('#workorder-window').validationEngine('validate')) {/* … do something */}}}
});
});

to add the class to the first button in the set...

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="workorder-window" class="bkgdcolor ui-corner-all-y ui-widget-content ui-dialog-content" style="width: auto; min-height: 209.4px; height: auto;" scrolltop="0" scrollleft="0">
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">

<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
</div>

</div>
</div>

[edited by: tedster at 4:50 pm (utc) on Jun 4, 2012]
[edit reason] prevent side-scroll [/edit]

[Fotiman]

You are missing a space after #workorder-window:

$('#workorder-window .ui-dialog-buttonset button').first().addClass('submit');

[nelsonm]

Hi Fotiman,

I tried that but it still does not appear with the other classes on the button element.

BTW, i added some more info to my post above to make things more clear.

[Fotiman]

Well, the space is needed.

$('#workorder-window.ui-dialog-buttonset button')
That selector is looking for the button descendants of the element that has both the id workorder-window AND the class ui-dialog-buttonset.

$('#workorder-window .ui-dialog-buttonset button')
That selector is looking for the button descendants of the element that has the class ui-dialog-buttonset that is a descendant of the element with id workorder-window.

Looking at your markup, this second one is the selector you are trying to match.

Note, I don't see #workorder-button in your markup.

[nelsonm]

Fotiman,

ummm wait - i have to find it.

OMG... I'm now officially an idiot and your a certified genius!

You just made me realize that the "#workorder-button" markup no longer exists. I've been trying to get this ValidationEngine plugin to work properly for 2 days now not realizing that it was not even being executed (but thinking that it was) because the dialog was actually being fired via another div that is bound to the dialog.

the add class problem is now moot because the original problem i was trying to solve - getting ValidationEngine to work - now works correctly, thanks to you.

Man... i really have to go back to school or get a new brain.

thanks again.