Fancybox pass value to parent window using jquery or not

Some times when I work with fancybox I’ve to update some values to the parent Window.

Default.aspx

<script type="text/javascript">
    var btnSearchId;


    $(document).ready(function () {
        // set fancybox to the link
        $('#AddNumberoLink').fancybox();
        // save in a global variable the ClientID of the Asp.Net Button
        btnSearchId = '<%=BtnSearch.ClientID %>';
    });
</script>
<div>
    <div>
        <h2>Search</h2>
    </div>
    <asp:Panel runat="server" ID="PanelSearch" DefaultButton="BtnSearch">
        <div style="float:right">
            <a id="AddNumberoLink" href="AddEditNumero.aspx">New</a>
        </div>
        <table>
            <tr>
                <td>
                    Name: <asp:TextBox ID="TextBoxSearch" runat="server" />
                </td>
                <td>
                    <asp:Button ID="BtnSearch" runat="server" onclick="BtnSearch_Click" Text="Cerca" />
                </td>
            </tr>
        </table>
    </asp:Panel>
</div>

And this is the code of the page will be opened in fancybox by clicking on New link

AddEditNumero.aspx

<script type="text/javascript">
    function removeItem() {
        if (confirm("Procedere con l' eliminazione del numero selezionato?")) {
            $.ajax({
                type: "GET",
                dataType: "html",
                cache: false,
                url: "RubricaHandler.ashx?action=removeItem&IdNumero=" + $('#<%=HiddenIdNumero.ClientID %>').val(),
                beforeSend: function () { },
                complete: function () { },
                error: function (xhr, status, errorThrown) {
                    $("#operationResult").html(errorThrown + '\n' + status + '\n' + xhr.statusText);
                },
                success: function (result) {
                    disableUI();
                    $("#operationResult").html("Numero rimosso");
                    setTimeout("closeFancybox()", 1500);

                    window.parent.$("#" + btnSearchId).click();
                }
            });
        }
    }
</script>
<div>
...
    <asp:HiddenField runat="server" ID="HiddenIdNumero" />
    <a href="#" onclick="removeItem()">Remove</a>
</div>
<div id="operationResult">
</div>

By pressing the “Remove” link will be called removeItem() function, the function use ajax to call a GenericHandler and in the success callback I’ll update the div “operationResult”, I’ll close fancybox after 1500ms and I send the click to the search button present in the parent window.

Other thing to notice is that the button is an Asp.Net button so I don’t know the clientId of the control on the popup.
To have this we need to save on a global varibale and use it when it’s necessary.

Other scenario is when we need to open a popup and modify a complex value, then comeback to the edit page and save some information of the modifyed data to an hidden field of the parent window like this:

window.parent.$("#HiddenFieldState").val("MyValue");

if we don’t use jquery but the DOM the code will be

var myHidden = window.parent.document.getElementById('HiddenFieldState");
Annunci

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in .Net, Asp.Net, c#, jquery e contrassegnata con , , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...