UI + AJAX Dialog

UI + AJAX Dialog


Hi all,
I'm making a page with a number of AJAX dialogs - each calling a
different page. I'm not very well up on javascript but from various
places i've come up with this code to call the popup:
$('.popup').click(
function (){
        var url=$(this).attr('href');
        var winTitle=$(this).attr('title');
        $("#popup").dialog({
title: winTitle,
        width: 400,
        height: 500,
modal: true,
autoOpen: false,
open: function() {
//display correct dialog content
$("#popup").load(url);}
});
$("#popup").dialog("open");
return false;
}
);
I'm sure this is isn't the best way to do this but it's what I botched
together! I then have the div #popup in the body of the page with
links of class popup to call the function. This works fine for the
first popup, but the problem is that when I click on another link the
same page appears in the popup - i.e. the first page is loaded into
the #popup div and stays there - I can't get it to use the next link's
page. Is there anyway to reuse the #popup div and this function for
multiple pages or does each one need it's own div?
Thanks,
- Mick