jQuery get add row to table on window.open

Question

I am trying to create a clipboard box where I can copy some columns from a table on the parent page/window to a pop up window.

Parent window elements:

Table with checkbox per row (selection)
Button to copy rows to another window table

Popup window elements:

Table which has no row (tbody only)

FILE 1: JavaScript file of Parent Window

         $("#button_copy").on("click", function() {
            var l_url = "<?php echo base_url(); ?>clipboard/";
            var l_name = "ClipboardWindow";
            var l_height = 500;
            var l_width = 1000;

            var l_params = 'status=1' +
                           ',resizable=1' +
                           ',scrollbars=1' +
                           ',width=' + l_width +
                           ',height=' + l_height +
                           ',left=0' +
                           ',top=0';

            // get selected rows details
            var table_result = $("#table_result");
            var row_contents = [];
            $('input:checkbox:checked', table_result).map(function() {
                var row = [];
                row['item_code'] = $(this).closest('tr').find('.row_item_code').text();
                row['sales_description'] = $(this).closest('tr').find('.row_sales_description').text();
                row['buy_description'] = $(this).closest('tr').find('.row_buy_description').text();
                row['sell'] = $(this).closest('tr').find('.row_sell').text();
                row['buy'] = $(this).closest('tr').find('.row_buy').text();

                row_contents.push(row);
            });
            // display selected rows on the pop up window
            var row_html = "";
            row_contents.forEach(function(row) {
                row_html = row_html + "<td>" + row['item_code'] + "</td>";
                row_html = row_html + "<td>" + row['sales_description'] + "</td>";
                row_html = row_html + "<td>" + row['buy_description'] + "</td>";
                row_html = row_html + "<td>" + row['sell'] + "</td>";
                row_html = row_html + "<td>" + row['buy'] + "</td>";
            });

            if ((myWindow == null) || (myWindow.closed)) {
                console.log("new window");
                // open pop up window and get document for processing
                myWindow = window.open(l_url, l_name, l_params);
                myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
            } else {
                console.log("existing window");
                myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
            }
        });

FILE 2: HTML File of Popup Window:

                        <div class="panel-body">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="table_clipboard">
                            <thead>
                                <tr>
                                    <th>Item Code</th>
                                    <th>Sales Description</th>
                                    <th>Buy Description</th>
                                    <th>Sell</th>
                                    <th>Buy</th>
                                </tr>
                            </thead>
                            <tbody id="tbody_result">
                            </tbody>
                        </table>
                        <!-- /.table-responsive -->
                    </div>

I am not able to make it work.. Here are my problems:

The row is not created upon window.open
It has error initial: TypeError: Cannot read property 'append' of null which maybe the dom has not yet been loaded since call?
The JS appends new row but only after the page was loaded by previous button click (which is okay)
The JS appends only add 1 row and 1 column which is not in HTML format but text (image attached below)

@skobaljic it might need another page so the parent window can be closed or change the contents of the parent page table from search. This new window will contain all items they need to copy for faster process. — jck
– jck, Commented May 8, 2017 at 17:51
Each row you append should be wrapped in <tr>, not all html inside one table row. — skobaljic
– skobaljic, Commented May 8, 2017 at 17:53
There is no append function on a HTMLElement. You're probably looking for appendChild, but that doesn't take HTML text. I think you want to do $('#tbody_result', myWindow.document) instead. — Heretic Monkey
– Heretic Monkey, Commented May 8, 2017 at 17:54
@skobaljic I think I included it in the append append("<tr>" + row_html + "</tr>"); I will modify this one.. Thank you — jck
– jck, Commented May 8, 2017 at 17:54

jck · Accepted Answer · 2017-05-09 09:57:22Z

I am answering my question as I found some work around to the other problems I enumerated in the Question, and since no one has posted an answer yet.

Problems 1 & 2 solved: Instead of the following code:

       if ((myWindow == null) || (myWindow.closed)) {
            console.log("new window");
            // open pop up window and get document for processing
            myWindow = window.open(l_url, l_name, l_params);
            myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
        }

I use the following to check if DOM is loaded on:

           if ((myWindow == null) || (myWindow.closed)) {
                // open pop up window and get document for processing
                myWindow = window.open(l_url, l_name, l_params);
                $(myWindow).on('load', function() {
                    $('#tbody_result', myWindow.document).append(row_html);
                });
            }

Problems 3 & 4 solved: @MikeMcCaughan - suggested that instead of this one:

myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");

I should use:

$('#tbody_result', myWindow.document)

and it worked. Since I'm working in jQuery, this is a better solution that is using selector.

Collectives™ on Stack Overflow

jQuery get add row to table on window.open

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related