17 August 2010

Small victories

This is a puzzle I had failed to solve a few weeks ago; I finally figured out how to do it. Given a modal that you've opened with jQuery's dialog(), and given that it has some buttons (like "Save" and "Cancel") that you've added as options, how can you programmatically disable or hide a button? dialog() doesn't give the buttons IDs or distinguishing classes. And you don't want to look at everything in the DOM, just the row of buttons on your modal.

I already have as part of our framework the DOM ID of the <div> that makes up the body of the modal: it's in a variable called overlay.context. The trick is to walk up two levels of the DOM to the common ancestor of the body and the buttons. So, to hide the button with a label of "Cancel":



var grandParent = $(overlay.context).parent().parent();
$(":button:contains('Cancel')", grandParent).hide();

No comments: