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.

by Adam Boduch

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",
    
    // 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" ) );
            
        }    
    }
    
});