CODEWITHSUNDEEP
jqueryasp.net-mvc-3jquery-ui
IyaTaisho
IyaTaisho

Reputation: 863

Closing a jQuery dialog

I'm currently working on loading a dialog with a View. This View handles both Insert and Edit for products being purchased.

The issue I'm coming across is when I save my product, I need to close the dialog and refresh a grid that was on the original page. When I try to do so, I'm trying to find the dialog in my parent and trigger the close event. So far I've been ineffective in finding the dialog in the parent. I have been able to find the grid and force it's refresh.

My question is, is there a way to trigger the closing from within the dialog? Btw, I'm not sure if this is part of the issue or not, but I'm using a full View for my dialog and not a Partial View.

Any help would be appreciated. Thanks.

Kindest Regards, Chad

Edit: Here is my code.

View (parent page)

...
<div id="divPOProduct">
</div>

<script type="text/javascript">
    var selectedIds = [];

    $(document).ready(function () {
            $("#divPOProduct").dialog({
                height: 500,
                width: 700,
                modal: true,
                autoOpen: false,
                draggable: false,
                resizable: false,
                open: function () { },
                close: function (event, target) {
                        alert("Here");
                        return false;
                }
            });

   //"Add" button
            $("#add-poproduct").click(function (e) {
                e.preventDefault();

                var link = '@(Url.Action("POProductAddPopup", "PurchaseOrder", new { purchaseOrderId = Model.Id }))';
                //OpenWindow(link, 600, 500, true);

                $("#divPOProduct").load(link);
                $("#divPOProduct").dialog("open");


                return false;
            });

...

View (dialog)

$("#save").click(function (e) {
        var validationTest = CheckValidation();

        if (validationTest) {
            var model = {
                ...
            };
            $.getJSON('@Url.Action("SavePurchaseOrderProduct", "PurchaseOrder")', model, function (result) {
                if (result) {
                    //$(this).closest('.ui-dialog-content').dialog('close')
                    window.parent.$("divPOProduct").dialog("close");
                    //$(window.parent).find("divPOProduct").dialog("close");
                }
            });
            return false;
        }
    });
});

The three attempts you will see in the if statement for the result are what I have tried thus far. I can find the parent now and the div, but not the dialog. Btw, all that returns from result is true/false.

Upvotes: 0

Views: 1084

Answers (2)

IyaTaisho
IyaTaisho

Reputation: 863

For the time being, my fix is that I refresh the parent page. This is not what I wanted to do but until I can fix it otherwise, my only solution. feels dirty Hate using this methodology.

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

enter code hereum try this:

 window.parent.$("#divPOProduct").dialog("close");

OR verbose alternate:

 window.parent.jQuery("#divPOProduct").dialog("close");

OR an alternate

 window.parent.document.jQuery("#divPOProduct").dialog("close");

One other option:

 window.opener.jQuery("#divPOProduct").dialog("close");

One other attempt: create a new JavaScript function on the parent window:

function closeMyDialog(){
    alert("closing my dialog");//to debug call
    jQuery("#divPOProduct").dialog("close");
}

then use: (on the child window)

  window.parent.closeMyDialog();

or

  window.parent.closeMyDialog

Upvotes: 1

Related Questions