How to replace content of a popup window with an AJAX request?

Question

I am at loss to understand how popup windows´ DOM-trees and their manipulation from opener window work. What is the proper way to implement what I am trying to do (described below)?

I have one normal browser window where JavaScript function gathers selected elements and creates POST data string from them. I then open a popup window with placeholder content, bind a function to window.ready that does the AJAX request and then try to replace the HTML in popup window with AJAX results.

In code this is done in JavaScript run on the opener window:.

function showMessages(queryParams, width, height) {
    var mailWindow = window.open('html/blankwithdoctype.html', 'foo', 'resizable=yes,scrollbars=yes,height='+height+',width='+width);
    var params = queryParams.substring(1);
    $(mailWindow.document).ready(function() {
        doPostRequest(params, mailWindow);
    });
    return mailWindow;
}

function doPostRequest(queryParams, mailWindow) {
    function callback(data, textStatus) {
        var mv = mailWindow;
        $(mv.document).find("html").html(data);
    };
    $.post('MailFile.do', queryParams, callback);
}

When breaking at $(mv.document).find("html").html(data); with Chrome developer tools or Firefox+FireBug, I notice that temporarily the result is shown but after the JQuery call stack is unwound (after $.post('MailFile.do', queryParams, callback);) the original blank page is yet again shown.

Without a debugger, I notice that rendering of the result page is atleast started but it is quickly replaced with the original placeholder page.

Something funny is definitely going on here.

Answer 1

I suspect that the jQuery library is not loaded in the popup window. Then, when the code that follows the ready event in the popup window is executed, the $ function is unknown, causing the error. I might be wrong though, I have never used ready() in a cross-window fashion (and always on document, not on window).

EDIT: What you could also do (instead of including jQuery in the opened window) is replace every $ in the opened window with window.opener.$. But that's rather ugly, now, isn't it? ;-)

Cheers, Tom