Refresh parent page when jQuery UI Dialog is closed

I used older JQuery. The reload parent page function worked very well. I use now the “Dialog Window – External Page Loading” from Infragistics. It works except this function. I would be very thankful for any help.

Hello Fragend,

Thank you for posting in our forums!

Please provide a little more information so I may have a better understanding of your scenario.  Answer the following questions.

1. What is the "reload parent page function" you are using?
2. Are you trying to call this from the page that is displayed in the igDialog?
3. How are you setting up the igDialog?
4. What version and build of Ignite UI are you using? (e.g. 16.2.20162.2141)

Can you provide a sample that demonstrates the issue?

Looking forward to hearing from you.

Hello Michael H.,

Thank you very much for the reply. Let me try to answer or to give some clarity:

1. My "reload parent page function" is a page with form.

2. The igDialog is part of the parent page form. The changes made on the igDialog, should be saved in the database and displayed on the parent page, when the igDialog is closed.

3. The settings for this igDialog is "External page Loading". I have external HTML that is shown on this dialog window.

4. I have the current Version – 2016.2. Sorry I don't know.

I would like to say also, that this dialog window is really great! Great work!

Thank you for any help!

Hope hear from you soon!

Hirut

Hi Hirut,

You can handle the igDialog's stateChanged event and check for the ui.action argument to be "close".  This will indicate when the igDialog is closing and you can update the parent page then.

If you need further assistance with this, please let me know.

Hi,

Thank you for your replay. But something is not correctly placed, I think.

My script is like this :-

<script>
                                            $(function () {
                                                var width = $(window).width > 1120 ? 1100 : 1020,
                                                    height = $(window).width > 780 ? 740 : 740;
                                                $("#openDdialog_product").igButton({ labelText: "Product" });
                                                $("#dialog_product").igDialog({
                                                    state: "closed",
                                                    autoOpen: false,
                                                    modal: true,
                                                    height: height,
                                                    width: width,
                                                    headerText: "Product",
                                                    showMinimizeButton: true,
                                                    showMaximizeButton: true,
                                                    showPinButton: true,
                                                    
                                                });
                                                $("#openDdialog_product").on({
                                                    click: function (e) {
                                                        $("#dialog_product").igDialog("open");
                                                    }
                                                });
                                                $(document).delegate(".selector", "igdialogstatechanged", function (evt, ui) {
                                                    evt;

                                                    ui.closed
                                                });
                                                
                                                $(".selector").igDialog({
                                                    stateChanging : function(evt, ui) { window.location.reload(true); }
                                                });
                                            });
                                        </script>

nothing happens. But if I put it this way :-

<script>
                                            $(function () {
                                                var width = $(window).width > 1120 ? 1100 : 1020,
                                                    height = $(window).width > 780 ? 740 : 740;
                                                $("#openDdialog_produkt").igButton({ labelText: "Produkt" });
                                                $("#dialog_produkt").igDialog({
                                                    state: "closed",
                                                    autoOpen: false,
                                                    modal: true,
                                                    height: height,
                                                    width: width,
                                                    headerText: "Produkt",
                                                    showMinimizeButton: true,
                                                    showMaximizeButton: true,
                                                    showPinButton: true,
                                                    stateChanging : function(evt, ui) { window.location.reload(true); }
                                                    
                                                });
                                                $("#openDdialog_produkt").on({
                                                    click: function (e) {
                                                        $("#dialog_produkt").igDialog("open");
                                                    }
                                                });

                                            });
                                        </script>

the igDialog window closed immediately and the parent window is reloading.

Can anyone look at it and give me a hint or correct it?

Thank you very much

Hello Fragend,

The issue you are having with the first code snippet is that you are not using the correct jQuery selector when binding the events.

And regarding the second snippet, the reason the page is reloading when the igDialog opens is because you are calling the reload() method during the stateChanging event without any additional logic.  The igDialog being opened from a closed state will fire the stateChanging event.  You will need to add some logic to the event handler for when you want the page to reload.

If you have any further questions with this, please let me know.