Passing data between a parent window and a child popup window with jQuery

I have the following HTML

<tr>
    <td class="label" valign="top">
        Affiliate Party
    </td>
    <td class="field">
        <input type="hidden" name="ctl00$MainContent$ExternalAccountAttributes$AffiliatePartyId" id="AffiliatePartyId" />
        <input name="ctl00$MainContent$ExternalAccountAttributes$AffiliatePartyName" type="text" id="AffiliatePartyName" class="PartyLookup" />
    </td>
</tr>

and the following Javascript/jQuery

$(".PartyLookup").after("<img src='Images/book_open.png' class='PartyLookupToggle' style='padding-left:4px;' />");

$(".PartyLookupToggle").click(function () {
    window.open("PartySearch.aspx", "PartySearch", "width=400,height=50");
    return false;
});

I need to be able to flag ANY PartyId input field with class=”PartyLookup” so that it will modify the DOM and include the image next to the input field. The popup window returns data to populate both the hidden and text fields, but since the click() is generic I need to pass it the ID of the input field. I have no idea how to do this. Any suggestions?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Script on parent page:

$(".PartyLookupToggle").click(function () {
    var id = $(this).prev().prev().attr("id");
    var name = $(this).prev().attr("id");

    var url = "PartySearch.aspx?id=" + id + "&name=" + name;

    window.open(url, "PartySearch", "width=400,height=50");
    return false;
});

Script on child page:

// Get the values from the URL using the jquery.query plug-in
var id = $.query.get("id");
var name = $.query.get("name");

// Get the values from the drop down
var newPartyId = $("#ddlMatchingParties").val();
var newPartyName = $("#ddlMatchingParties option:selected").text();

// Set them to the parent window
window.opener.$("#" + id).val(newPartyId);
window.opener.$("#" + name).val(newPartyName);

// Close the popup
window.close();

Method 2

It’s very simple with jQuery, in your child window (popup) call your parent window objects there:

$("#txtCodCliente", opener.window.document).val("VALUE TO "); //assign

$("#btnSelCliente", opener.window.document).click();

with opener.window.document we tell to jQuery that the object is in window that opens the popup.

Method 3

Have a look at this instructional article: http://www.plus2net.com/javascript_tutorial/window-child3.php

Essentially, you need to do this in the child window’s form. You’ll be passing a value like so:

opener.document.f1.p_name.value="Any value";

Where f1 is the ID of the form in the parent window and p_name is the name of the field in the form.

Once you have the value in a field on the parent, you can do whatever you like with it.

EDIT:

To pass info to the child window, the easiest method would probably be via query string, and then read the query string from the child window. In this case, probably something like:

$(".PartyLookupToggle").click(function () {
    window.open("PartySearch.aspx?id=" + $(this).prev().attr('id'), "PartySearch", "width=400,height=50");
    return false;
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0