Webpage refresh forced upon clicking "update" button in Tabular Report

[Leon13]

Howdy

I added two data pages (Tabular Reports) to my web page.

Only one is editable, the other is only a reference.

Once user updates the editable report I would like to force a webpage refresh.

Already tinkered with the below, but had no luck to get the entire webpage to refresh.

Thank you! 

[Meekeee]

Hi - Just wanted to share this solution. You can use this if you have a Tabular Report with Inline Edit and upon update, you want to reload the whole page. Insert it in the Footer of the DataPage.

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

  document.addEventListener("change", function(event){

    var edit= document.querySelector('[name="Mod0InlineEdit"]');
    
       edit.addEventListener("click", function(){
          window.parent.location = document.referrer;
       });
  });
  
});
</script>

[SinJunYoung]

Hello, if you are familiar with Javascript, you can apply the FormSubmitted on update. Here's the reference: https://howto.caspio.com/datapages/ajax-loading/

[Leon13]

On 1/25/2020 at 3:19 PM, SinJunYoung said:

Hello, if you are familiar with Javascript, you can apply the FormSubmitted on update. Here's the reference: https://howto.caspio.com/datapages/ajax-loading/

Thank you for your response SinJun.

Do I disable Ajax and paste the below in my HTML editor in my site, where I have the code that links to my Caspio data page?

Do I need to edit the code below?  (the "do something" does not look correct to me, but I am still learning..)

Thank you! 

 

 

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {
	// do something
});
</script>

[kpcollier]

On 1/26/2020 at 5:47 PM, Leon13 said:

Do I need to edit the code below?  (the "do something" does not look correct to me, but I am still learning..)

I believe this is what you need:

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {
	location.reload();
});
</script>

 

[Leon13]

3 hours ago, kpcollier said:

I believe this is what you need:

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {
	location.reload();
});
</script>

 

Thank you @kpcollier !!  :)   Worked like a charm.  Greatly appreciate your help!

[Lepidoptera]

On 3/9/2022 at 6:18 AM, Meekeee said:

Hi - Just wanted to share this solution. You can use this if you have a Tabular Report with Inline Edit and upon update, you want to reload the whole page. Insert it in the Footer of the DataPage.

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

  document.addEventListener("change", function(event){

    var edit= document.querySelector('[name="Mod0InlineEdit"]');
    
       edit.addEventListener("click", function(){
          window.parent.location = document.referrer;
       });
  });
  
});
</script>

Hey @Meekeee, thank you for this! I have some minor issue with this. Sometimes the page reloads on inline save/update but sometimes it doesn't. No error is being shown in the console.

[Meekeee]

Hi @Lepidoptera - Glad to help! Can you try to remove the DataPageReady event?