Create modal popup and refresh parent on pop-up close

[skwaler]

Hi All,

I want to have a link on a datapage that will open a popup to allow editing of a subset of records.

When the pop-up closes (perhaps only if pop-up page is submitted) i'd like to refresh the parent page so that it would display the updated records.

 

Anyone know if this is possible?

 

[KlisaN137]

Hi @skwaler,

Did you tried to make popup using the following article?

https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-generate-link-menus-and-popup-windows/

[skwaler]

@KlisaN137 YesIi have seen this. Making the pop up is easy. It's refreshing the parent when pop-up is updated that I have no idea about.

[KlisaN137]

@skwaler As I checked, it may not be possible to update the parent DataPage when data from it are updated on the separate pop up page. Refer to the below Posts:

 

It is possible to refresh the page at some time interval, but I suspect that is not the intended workflow here...

Have you considered using Inline Edit or Grid Edit on your Report DataPage instead of pop up? That way, if records are edited, the DataPage is updated. Please refer to the:
https://howto.caspio.com/datapages/reports/data-editing-options-in-reports/

Anyway, I will continue to look onto this issue, and will update here if I find something.

[skwaler]

@KlisaN137 The issue is this page used a view with data from multiple tables. You can only allow editing of one table in the view.

[KlisaN137]

@skwaler Workaround that comes to my mind is to maybe use Multipage Form?
https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-create-a-multi-page-form/

 

[Kurumi]

Hi @skwaler - what type of DataPage you are using on the parent page and the pop-up?

[GoodBoy]

Hi guys! They already have a helpful documentation on how to implement modal in our DataPages.  

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/open-details-datapages-in-a-lightbox/

[Kurumi]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>

 

[cheonsa]

Hi all!

The solution provided here might be helpful.

Hoping this will work for you as well.

[Kurumi]

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style>