Отображение содержимого другой страницы в окне наложения

Question

Привет, у меня есть родительская страница и дочерняя страница

<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>

Это код моей родительской страницы, теперь я хочу отображать диалоговое окно при нажатии кнопки, которое должно содержать значения страницы child.html

Код страницы Child.html

 <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>

Пожалуйста, помогите

Answer 1

Вы не можете использовать

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

потому что вы не открыли child.html в новом окне с вызовом window.open(). Вы загрузили содержимое этой дочерней страницы непосредственно на родительскую страницу и показали ее в виде диалога. Таким образом, вы можете получить доступ к элементам прямо на вашей странице. Замените строку выше на

var table = $('#dataTable');

Также ваш код в вашем child.html, заключенном в jQuery(document).ready(), не будет запущен, потому что событие готовности не будет запущено. Снимите обертку.