Question

I have a div:

<div id="dialog"></div>

And there’s a javascript function that brings up a JQueryUI dialog:

ui_info(title,txt)
{
     $('#dialog').attr('title', title).text(txt).dialog({
    width: 500,
    buttons:
[{
    text: 'OK',
    click: function ()
    {
        $(this).dialog('close');
    }
}
],
});
return false;
}

My problem is if I call this method once I get title and the text right. But if I call it again the text changes , however the title for the dialog remains the same. So for instance, if I call this function like this:

ui_info('First title','This is the first text');

I get the title ‘This is title 1’ and the text ‘This is the first text’. And then if I call it again like this:

ui_info('Next title','The text is different now');

For text I’ll get ‘The text is different now’, which is what I want, but for the title I still get ‘First title’, whereas I’m expecting ‘Next title’

Answer 1

Use $(this).dialog('destroy'); instead of $(this).dialog('close');

Demo of your version: http://jsfiddle.net/wCWTE/1/

Demo of corrected version: http://jsfiddle.net/wCWTE/

If you still want to use the close method you can use the open event and setting the title using the option given by default by the dialog settings, so you will have:

function ui_info(title,txt)
{
  $('#dialog').text(txt).dialog({
    width: 500,
    buttons:
    [{
       text: 'OK',
       click: function ()
       {
          $(this).dialog('close');
       }
    }],
    open:function() {
        $(this).dialog('option','title',title)
    }
  });
}

Please see this new demo http://jsfiddle.net/wCWTE/2/