homepage Welcome to WebmasterWorld Guest from 54.161.191.254
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 / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
trying to target jquery button with css selector.
nelsonm




msg:4471886
 7:16 pm on Jul 2, 2012 (gmt 0)

hi all,

I've been struggling with binding a jquery click method to a specific button in a jquery dialog because i can't get the selector right.

I want to specifically target all jquery dialog submit buttons. I have the following selector set up that works for the first button in the buttonset but the submit button is not always the first button in the set.
$('body').on('keypress', '.ui-dialog', function(event) { 
if (event.keyCode === $.ui.keyCode.ENTER) {
$(this).find('.ui-dialog-buttonpane button:first').click();
return false;
}
});

but i can't get it to work for the following jquery dialog buttonset. Can anyone help me out?

<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">
<span class="ui-button-text">Print Work Order</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Submit</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>
</div>

[edited by: alt131 at 12:20 pm (utc) on Jul 7, 2012]
[edit reason] Side Scroll [/edit]

 

nelsonm




msg:4471926
 8:22 pm on Jul 2, 2012 (gmt 0)

What i'd like to do is bind the click method to the button in the ui-dialog-buttonpane who's span element text is "Submit". This way the click method will always work on the submit button even if another button is added to the dialog iu-dialog-buttonpane.

The only unique thing in the dynamically generated jquery dialog button pane is the name of the buttons contained as text in the span tag for each button.

I just can't figure out if this can be done.

Fotiman




msg:4471958
 10:58 pm on Jul 2, 2012 (gmt 0)

How about this:

$(this).find(".ui-button-text:contains('Submit'):parent").click();

I haven't tried it, but I think that would do what you're trying to do.

nelsonm




msg:4471960
 11:48 pm on Jul 2, 2012 (gmt 0)

Fotiman, thanks again - that worked.

I was reading up on the :contains() and :parent selectors in the jquery selector docs. I didn't realize you could combine them to get the parent (the button tag) of the span element tag.

How did you know you could combine them that way? Or am i just missing the point that they are merely selectors and selectors can be combined.

nelsonm




msg:4471974
 12:52 am on Jul 3, 2012 (gmt 0)

Fotiman,

I wrote the selector to the console.log. It appears that jquery is ignoring the :parent selector. i removed :parent from $(this).find(".ui-button-text:contains('Submit')").click(); and it still worked. The click method appears to be bound to the span tag - but it still works.

Fotiman




msg:4472007
 3:05 am on Jul 3, 2012 (gmt 0)

Glad it worked. :) jQuery's selectors are pretty powerful, so I just figured that more accurately represented what you were trying to select.

nelsonm




msg:4472020
 4:43 am on Jul 3, 2012 (gmt 0)

Fotiman,

it appears that:
$(".ui-button-text:contains('Submit')").parent().click();
or
$(this).find(".ui-button-text:contains('Submit')").parent().click();
also work and both (minus the .click) resolve to "button.ui-button".

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
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