update dialog title for each click

Question

Hey guys I have a quick question, I have a dialog box that has multiple links with different attributes. Each time a link is clicked, the attribute src is printed inside of the dialog box so that each link has a unique output in the dialog. My problem is simply that only the first src title is in every box and I would like to change that as well with each click. I separated the line containing title to show the problem. If anyone has any ideas I would appreciate it. EDIT

<a class="open" src="something" title="Click to play">link</a>
<a class="open" src="something else" title="Click to play">link2</a>

$(function() {

$(\"#show\").dialog({
hide: 'clip', 
width: 400,
height: 150,
position: 'center',
show: 'clip',stack: true, 
minHeight: 25,
minWidth: 100, 
autoOpen: false,
resizable:false});

$('.open').click(function() {
var src=$(this).attr('src');
$('#show').html(src);
$('#show').dialog({ title: src }).dialog('open');
  })

 });

Answer 1

Update jQuery UI Title

$('#show').data('title.dialog', 'new title');

Answer 2

You need to either create the dialog outside your function once, and set the title, or destroy the previous dialog.

To destroy the previous one and create a new one each click:

$("#show").dialog("destroy").dialog( { options });

To just set the title and text each time and create the dialog once (better approach):

$("#show").dialog({
  hide: 'clip', 
  width: 400,
  height: 150,
  position: 'center', 
  show: 'clip',
  stack: true,
  minHeight: 25, 
  minWidth: 100, 
  autoOpen: false,
  resizable: false
});
$('.open').click(function() {
  var src = $(this).attr('src');
  $('#show').html(src).dialog('option', 'title', src).dialog('open');
  //or...
  $('#show').html(src).dialog('option', {title: src}).dialog('open');
});