Welcome to WebmasterWorld Guest from 54.161.255.61

Forum Moderators: open

Problem getting css class added to element.

   
2:07 pm on Jun 4, 2012 (gmt 0)

5+ Year Member



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]

2:34 pm on Jun 4, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



You are missing a space after #workorder-window:

$('#workorder-window .ui-dialog-buttonset button').first().addClass('submit');
2:43 pm on Jun 4, 2012 (gmt 0)

5+ Year Member



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.
2:59 pm on Jun 4, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
5:01 pm on Jun 4, 2012 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month