homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Problem getting css class added to element.
nelsonm

5+ Year Member



 
Msg#: 4461224 posted 2:07 pm on Jun 4, 2012 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4461224 posted 2:34 pm on Jun 4, 2012 (gmt 0)

You are missing a space after #workorder-window:

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

nelsonm

5+ Year Member



 
Msg#: 4461224 posted 2:43 pm on Jun 4, 2012 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4461224 posted 2:59 pm on Jun 4, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4461224 posted 5:01 pm on Jun 4, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved