CODEWITHSUNDEEP
javascriptasp.netjquery
mhenry
mhenry

Reputation: 1487

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?

Upvotes: 15

Views: 85910

Answers (3)

Adrian Ondarza
Adrian Ondarza

Reputation: 61

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.

Upvotes: 6

mhenry
mhenry

Reputation: 1487

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();

Upvotes: 25

Ender
Ender

Reputation: 15221

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;
});

Upvotes: 2

Related Questions