on successful ajax call, open a new window and append the data

Question

When I try to display the data in same page it works fine, but I need to open a new window/tab with data appended to that page

$.ajax({
    async : true,
    type : 'GET',
    cache : false,
    url : 'rest/getReport',
    data : 'startDate=' + fromDate + '&endDate=' + toDate,
    datatype : 'json',
    success : function (data) {
        that.viewReport(data);
    },

    complete : function (data) {
          $('#search-box').find('img.waiting').css('visibility', 'hidden');
    }
});

this is the method called on success

viewReport : function (data) {
    var table;
    window.open("details.htm");
    table = $('#Report table');//#report is id of div in details.htm
    if (data.length == 0) {
        $('#Report .no-view-error').show();
        return;
    }
    table.empty();
    $.each(data, function (index, item) {
        var row = '<tr id="tkNo-' + item.num + '">';
        row += '<td>' +item.Date + '</td>';
        row += '<td>' +item.Type + '</td>';
        row += '<td>' +item.Num + '</td>';
        row += '<td>' +item.receivedDate + '</td>';
        row += '<td>' +item.doneBy + '</td>';
        row += '<td>' +item.comments + '</td>';
        row += '</tr>';
    table.append(row);//appending rows to table in the new page
    });
}

in my jsp page the code is

<div id="Report" class="showDetails">
<div class="error-box no-view-error">There are no details in this period.</div>
<table></table>
</div>

You need to look for the `#Report table` in the popup context. Try: `var popup = window.open("details.htm"); table = $('#Report table', popup.document);` — Jakub Kotrs, Sep 21 '13 at 17:44

score 0 · Answer 1 · edited May 23 '17 at 12:15

Try this below code

viewReport : function (data) {
var table;
var new_window = window.open("details.htm");
table = $(new_window.document).find('#Report table');//#report is id of div in details.htm
if (data.length == 0) {
    $('#Report .no-view-error').show();
    return;
}
table.empty();
$.each(data, function (index, item) {
    var row = '<tr id="tkNo-' + item.num + '">';
    row += '<td>' +item.Date + '</td>';
    row += '<td>' +item.Type + '</td>';
    row += '<td>' +item.Num + '</td>';
    row += '<td>' +item.receivedDate + '</td>';
    row += '<td>' +item.doneBy + '</td>';
    row += '<td>' +item.comments + '</td>';
    row += '</tr>';
table.append(row);//appending rows to table in the new page
});

}

You can reference this link : here

on successful ajax call, open a new window and append the data

1 Answers1