Display contents of another page in a overlay box

Hi i have a parent page and child page

<script type="text/javascript">
$(document).ready(function(){
       var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 500,
        width: 500,
        draggable: true,
        resizeable: true,
        open: function() {
        //display correct dialog content
        $("#dataTable").load("child.html");}
        };
    $("#dataTable").dialog(dialogOpts); //end dialog

    $('#addRow').click(
        function (){
            $("#dataTable").dialog("open");
            return false;
        }
    );

});




       function RemoveRow(c) {
        $(c).parent().remove();
       }


jQuery(document).ready(function () {
$("#dataTable").bind("mouseover",function () {

  $("#dataTable").tableDnD();
});
});

    </script>

    <INPUT type="button" id="addRow" value="Add Row"  />



    <TABLE id="dataTable" width="350px" border="1">

    </TABLE>

This is my Parent page code, now i want to display dialog box when button clicked, which should contain the values of child.html page

Child.html page code

 <script type="text/javascript">

     function AddElement(id,name) {

            var table = window.opener.document.getElementById("dataTable");

              $(table).append('<tr id="'+id+'"><td  onclick="RemoveRow(this);">Remove</td><td>'+id+'</td><td>'+name+'</td></tr>');  
             //$(table).tableDnD();

            //self.close();
        }


jQuery(document).ready(function () {

  $("#table-1").tableDnD();
});


    </script>


    <table width="200" border开发者_运维问答='1' id="table-1">

    <tr id="1">
        <td><a href="#" onCLick='AddElement("1","Colur Plus")'>1</a></td>
        <td>Colur Plus</td>
    </tr>

    <tr id="2">
        <td><a href="#" onCLick='AddElement("2","Levis")'>2</a></td>
        <td>Levis</td>
    </tr>

    <tr id="3">
        <td><a href="#" onCLick='AddElement("3","Lee")'>3</a></td>
        <td>Lee</td>
    </tr>

    <tr id="4">
        <td><a href="#" onCLick='AddElement("4","Pepe Jeans")'>4</a></td>
        <td>Pepe Jeans</td>
    </tr>

    <tr id="5">
        <td><a href="#" onCLick='AddElement("5","US Polo")'>5</a></td>
        <td>US Polo</td>
    </tr>

    <tr id="6">
        <td><a href="#" onCLick='AddElement("6","Park Avenue")'>6</a></td>
        <td>Park Avenue</td>
    </tr>

    <tr id="7">
        <td><a href="#" onCLick='AddElement("7","Wrangler")'>7</a></td>
        <td>Wrangler</td>
    </tr>

    <tr id="8">
        <td><a href="#" onCLick='AddElement("8","Arrow")'>8</a></td>
        <td>Arrow</td>
    </tr>

    </table>

Please Help

You can't use

var table = window.opener.document.getElementById("dataTable");

because you didn't opened the child.html in an new window with a call to window.open(). You've loaded the contents of this child page into the parent page directly and showed it as a dialog. So you are able to access the elements directly within your page. Replace the line above with

var table = $('#dataTable');

Also your code within your child.html wrapped into jQuery(document).ready() will not run, because the ready event will not be fired. Remove the wrapper.