data('title.dialog', 'new title') not working

data('title.dialog', 'new title') not working

Hi,

I read the forum and found this syntax to change my dialog box title after it has been initialized:
  1. $('#myDialog').data('title.dialog', 'new title')
However, it doesn't work for me.
I'm using jQuery 1.4.2 and jQuery UI 1.8.

Here is my very simple page:
  1. <html>
  2.     <head>
  3.         <title>Dialog box test</title>
  4.         <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" />
  5.         <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  6.         <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

  8.         <script type="text/javascript">

  10.         function showDialog(title) {
  11.             if (title)
  12.                $('#dialog').data('title.dialog', title);

  14.            $('#dialog').dialog('open');
  15.         }

  17.         $(function() {
  18.             $('#dialog').dialog({
  19.                 autoOpen: false,
  20.                 modal: true
  21.             });
  22.         });

  24.         </script>
  25.     </head>
  26.     <body>
  27.           <div id="dialog" title="foo"></div>

  29.           <input type="button" value="foo" onclick="showDialog()" />
  30.           <input type="button" value="bar" onclick="showDialog('bar')" />
  31.     </body>
  32. </html>
I delved into the code with the Chrome debugger and from what I understood, the title is indeed changed on the cached object.

But then, when the dialog box opens, its title is not changed.

Did I miss anything? Do I use data() the wrong way?

Thanks for your help!