dialog is showing the same result - jquery-ui

Question

i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});

Answer 1

i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});