trying to target jquery button with css selector.

[nelsonm]

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]

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]

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]

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]

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]

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

[nelsonm]

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".