Parameters in Dialog Callbacks

The "this" context inside a jQuery UI dialog button callback references the dialog widget, not the button widget. This is useful if you want to pass additional data to the callback functions.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="dialog"></div>

JavaScript

$( "#dialog" ).dialog({
    
    // Some arbitrary option passed to the widget...
    foo: "bar",
    open: function() {alert($( this ).dialog( "option", "foo"))},
    // The dialog buttons...
    buttons: {
        Test: function( e ) {
            
            // "this" is a reference to the dialog, not the button
            var $dialog = $( this )
            
            // We can fetch the arbitrary "foo" option here, within our
            // button callback function and set it as the dialog title.
            $dialog.dialog( "option", "title", $dialog.dialog( "option", "foo" ) );
            
        }    
    }
    
});