How to reload a parent page when jQuery UI dialog is closed?

Question

I searched for this issues in stackoverflow and have seen similar questions (but not exactly what I'm looking for), but the solution doesn't seem to work. I am just a newbie in jQuery and I need your help to be able to make this work. (cross fingers)

So I have a webpage with a button (parentPage.html, for example). When the button is clicked (openItemPopup function is executed), it opens a modal dialog using jQuery UI. The content of the modal dialog "#contentWindow" is a different page (modalDialog.html, for example).

---

function resetContent() {
$('#contentFrame').attr('src', '/images/ajax-loader.gif');
}

function closeContent() {
$('.ui-dialog-titlebar-close').click();
}

function openItemPopup(){

$('#contentWindow').dialog({width:980, modal: true,
        close: function(ev, ui) { resetContent(); }
});
}

---

Inside modalDialog.html, when an anchor is clicked, it performs some logic and it needs to dynamically close the modal dialog. Someone told me to use this and this is already working:

---

              // refresh parent page before closing
              // doesn't work
              location.reload(true);

              // close the modal dialog
              window.top.closeContent();
              return false;
              window.location='javascript:void();';

---

My problem is: I need to refresh the parentPage.html just before closing the modal dialog. You see above that I tried to use location.reload(true);, but it reloads the modal dialog and not the parentPage.html. I cannot post pictures but it says *"Invalid Web application session".*

I also tried the window.top.location.reload(); and it seems to work. It reloads the parentPage.html and closes the modal dialog.

              // refresh parent page before closing
              // seems working but has error
              window.top.location.reload();

              // close the modal dialog
              window.top.closeContent();
              return false;
              window.location='javascript:void();';

However, it says "Invalid Web application session." -- just like how it was when using the location.reload(true);. I have no idea why this is happening and how to fix it. I am not even sure if window.top.location.reload is the correct method to do this.

FYI: I am trying to refresh the parentPage.html to be able to get the data back from the modal dialog. Before, modalDialog.html used to function as a simple html page. Data such as list and fields are returned properly from modalDialog.html to parentPage.html. They wanted to convert it as a modal dialog to prevent A LOT of page refresh. Someone told me that it is possible to use AJAX but it is a lot of work. Besides, I'm no master of it. If you have a better suggestion, feel free to let me know!

I hope you can help me out on this. Thanks in advance!!!

Answer 1

In you dialog use the close: function (ev, ui) { window.location.reload() }