Pass dialog title variable in jQuery Dialog

I need to pass the title of the jQuery dialog variably.

I am trying to use the "data" property like this:

jQuery( "#dialog" ).data( 'the_title', 'John Doe Dialog' ).dialog( "open" );
    
jQuery( function() {

    jQuery( "#dialog" ).dialog({       

        title: jQuery( "#dialog" ).data( 'the_title' ), 

    });

});

But it is not working, it is displaying the default title.

Any thought please?

You can directly specify any of the dialogue options documented here, title being one such, I've added another couple of options as further examples.

jQuery( "#dialog" ).dialog({
    title: 'John Doe Dialog',
    width: '100px',
    height: '50px'
});

You can also specify any option after the dialog is created

$('#dialog').dialog();
$('#dialog').dialog('option', 'title', 'wibble');

hence you can use this chaining style of code:

$('#dialog').dialog().dialog('option', 'title', 'wibble');