web-dev-qa-db-fra.com

Passage de données entre une fenêtre parent et une fenêtre popup enfant avec jQuery

J'ai le HTML suivant

<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>

et le Javascript/jQuery suivant

$(".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;
});

J'ai besoin de pouvoir marquer N'IMPORTE QUEL champ de saisie PartyId avec class = "PartyLookup" afin qu'il modifie le DOM et inclue l'image à côté du champ de saisie. La fenêtre contextuelle renvoie des données pour remplir à la fois les champs caché et texte, mais comme le clic () est générique, je dois lui transmettre l'ID du champ de saisie. Je n'ai aucune idée comment faire ça. Aucune suggestion?

15
mhenry

Script sur la page parent:

$(".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 sur la page enfant:

// 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();
25
mhenry

C'est très simple avec jQuery, dans votre fenêtre enfant (popup), appelez les objets de votre fenêtre parent là-bas:

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

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

avec opener.window.document on dit à jQuery que l'objet est dans une fenêtre qui ouvre le popup.

6
Adrian Ondarza

Jetez un œil à cet article pédagogique: http://www.plus2net.com/javascript_tutorial/window-child3.php

Essentiellement, vous devez le faire dans le formulaire de la fenêtre enfant. Vous passerez une valeur comme ceci:

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

f1 est l'ID du formulaire dans la fenêtre parent et p_name est le nom du champ du formulaire.

Une fois que vous avez la valeur dans un champ sur le parent, vous pouvez en faire ce que vous voulez.

ÉDITER:

Pour transmettre des informations à la fenêtre enfant, la méthode la plus simple consiste probablement à utiliser une chaîne de requête, puis à lire la chaîne de requête à partir de la fenêtre enfant. Dans ce cas, probablement quelque chose comme:

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