jquery ui dialog box show previous page before show new page's contents

Problem:

If you used jquery ui dialog box to show any dynamic page's contents then I am sure you have faced this problem. when you click first time it will work fine but the second time on click it will show previous page's contents and after  delay of 2 to 3 seconds it will show the contents of the url which you have supplied. this is the bug in jquery ui dialog box.
Consider below code:

<link rel="stylesheet" type="text/css" media="all" href="jquery-ui.css">

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<a href="#" onclick="show_full(1);>View</a>

<script>
function show_full(q_id) {
    var url="show_q_a.php?serial="+new Date().getTime()+"&q_id="+q_id;                   
    $( "#dialog" ).dialog( {
                                autoOpen: false,
                                modal: true,
                                height: 550,
                                width:1000,
                                title: "Question and Answer"
    });
    $("#dialog").load(url);
    $( "#dialog" ).dialog( "open" );
</script>

Solution:

Use <div> and <iframe > tag to prevent the show previous  page problem. see below correct code as a example.

Example:

function show_full(q_id) {
    var url="show_q_a.php?serial="+new Date().getTime()+"&q_id="+q_id;   
    var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + url+ '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 550,
                   width: 1231,
                   title: "Question and Answer"
               });
    $dialog.dialog('open');
}