Post values disappear with UI Dialog

Post values disappear with UI Dialog

I'm running into an interesting problem. I'm constructing a form that will allow a person to enter text into a textarea and then preview it. Currently, the person has to click preview, look at the text and then use the back button, which causes problems with losing changes/the entire block of text.

So my next thought was to allow for a UI dialog box to pop up and to submit the form values via a .load call to my PHP script. This works really well, but I notice if I preview and close the window (either with the X or with escape) more than three times, I start getting a blank window.

My code is as follows:
  1. <script type="text/javascript">
        function preview()
        {
            $('body').append('<div id="preview" title="Preview" style="display:none;"></div>');
            $('#preview').dialog({
                bgiframe: true,
                modal: true,
                resizable: false,
                height: '600',
                width: '80%',
                open:function()
                {
                    $('#preview').load('page.inc.php', {Submit:'Preview', highlights: document.getElementById("Highlights").value, });
                },
               
                close:function() { $("#preview").dialog("destroy"); $('body').remove('#preview'); },
                cancel:function() { $("#preview").dialog("destroy"); $('body').remove('#preview'); }

            });
        }
    </script>



















The PHP side just echos the text right now, so nothing crazy going on there.

I also find that unless I hide the preview div, after the second preview the div starts appearing in the page, as well as in the dialog box, so I'm not sure if that's standard or not.

And to answer the obvious question, yes I'll need to preview infinite times, the person I'm writing this for is paranoid about posting information and will be clicking that button a lot