Question

I’m working on a web app that uses jQueryUI and creates a ton of dialogs. The dialogs are all different, and the button to close the dialog can end up embedded several div’s into the dialog.

I’d like a function that always closes the containing dialog.

Take for example the following html:

<div id="demoDialog">
   <div>
      <div id='demoDialogSubmit'>
         <input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
      </div>
   <div>
<div>

Somewhere in my js code I initialized this as a dialog:

$( "#demoDialog" ).dialog( params );

Now for the on-click I have a few not so great choices. I could insist on the close button knowing the id of the dialog. E.g. do something like:

onclick="$( '#demoDialog' ).dialog( 'close' );"

But I’d rather have generic code instead of always having to carry around the id of the dialog so I can send it to a widget that may close it.

Or I can remember how many layers down I am:

function selfCloseDialog() { $(this).parent().dialog( 'close' ); }

But really I want selfCloseDialog() to just hunt up the layers of elements looking for the dialog object to close. How do I do this?

@Update:

So i got it working. Thanks everyone for their suggestions the problem actually had two issues.

First one problem was here:

<input type='submit' onClick='selfCloseDialog();' value='Ok'/>

It should be:

<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>

The button element is not passed in as the “this” argument to the function. Which seems obvious now.

And the following direct method JAAulde below works and seems the cleanest:

function selfCloseDialog( caller ) {
   $(caller).closest( ".ui-dialog-content" ).dialog('close');
}

There were several answers involving closest and a selector- but I don’t see any reason to use anything except the plain class selector he suggests.

Answer 1

When making your dialog, include a close button:

var params = {
    //whatever you already had in there
    buttons: {
        // In the buttons object, the "key" will be the button text, the function
        // will be executed on click of the button in scope of the dialoged element
        Close: function () {
            $(this).dialog('close');
        }
    }
};

$( "#demoDialog" ).dialog( params );

And from code running in scope of ANY descendant element of the dialoged element, run:

$(this).closest('.ui-dialog-content').dialog('close');