Table in jQuery ui .dialog not following dialog box when moved

Table in jQuery ui .dialog not following dialog box when moved

I'm getting a little better at using the jQuery ui .dialog box, and being
bold, and actually reading the documentation on the new ui .position
function, though I would give it a try.
There is a large hidden table in my DOM - it becomes "unhidden" when I
place it in a .dialog. Here is the code:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
});
This works great. Now I wanted to position it in a particular spot on the
DOM and was reading about the "new" .position function. I like the concept
of "cascading" and am now using .done after an ajax call instead of the
old "success:". So I did this:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
}).position({
my:"right center",
at:"right center",
of:"#centraldiv" });
And it worked, kind of. The dialog moved nicely into the position that I
wanted, but left the table behind in another position.
After playing for a while and reading more of the .dialog and .position
documentation, I tried the following, which worked beautifully:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true,
position:{my:"right center",
at:"right center",
of:"#centraldiv" }
});
So my questions are:
In the first instance/error/feature, why isn't the table "bound" to the
.dialog when it is placed in the $().dialog() - why doesn't it move with
the dialog?
Can I use .position in a cascading format with other stuff (divs, spans,
etc)?
Thanks again!