Get ajax jquery to reset when i click on another link - php

Question

index.php
$(document).ready(function(){
$('a.bruker').click(function() {
var idx = $(this).attr('id');
$.ajax({
url:'bruker.php',
type:'POST',
data: 'id='+idx,
cache: false,
success:function(data) {
$('#bruker').html(data);
}
});
});
});
echo "<div id='bruker'></div>";
<a class='bruker' id='1'>name1</a>
<a class='bruker' id='2'>name2</a>
bruker.php
if(isset($_POST['id'])) {
echo "<script> $(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' }
})
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
});</script>";
echo "<div class='bruker-box' title='(".$_POST['id'].")'>";
echo "example";
echo "</div>";
When i click out of the first box (name1) and click on name2 i want to get only the name 2 to come up, but the first box (name1) comming up first and than name2.
How can i get this right? Is there a way to reset somthing when i click on a new one?

Answer 1

This is happening because, every time an anchor is clicked, you are injecting a new div containing a dialog set to autoOpen. (Turn on Developer Tools F12 in Chrome and watch what happens.)
The autoOpen divs accumulate, redisplaying themselves with each change to the DOM.
To solve this, you can remove() the div after it displays. Change your bruker.php file to look like this:
Note the addition of a close: function in the dialog definition:
PHP:
if(isset($_POST['id'])) {
$out = "
<script>
$(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' },
close: function() {
$('div.ui-dialog').remove();
}
}); //END .dialog()
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
}); //END document.ready
</script>";
$out .= "<div class='bruker-box' title='Name: (" .$_POST['id']. ")'>";
$out .= "example";
$out .= "</div>";
echo $out;
}