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! 

[Kurumi]

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.

[Kurumi]

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

[roattw]

"You can use this if you have a Tabular Report with Inline Edit and upon update"  What if you are using the Update button in a Details page?

[PotatoMato]

Hello, @roattw. You may try changing the "Mod0InlineEdit" to "Mod0EditRecord" which refers to the Update button of the Details page.

 

-Potato

[DaveS]

I know that this isn't a 100% current thread, but I had a similar challenge and I wanted others to be able to find the solution here. 

I needed to refresh the data page after an Inline Add.  The scenario is that I'm defaulting some values in the inline add record, and I need that code to run each time a record is added.  There might be a better way to do it than refresh the whole page, but this is what I came up with (with fabulous support from Lex in Caspio Support:

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
var addbutton= document.querySelector('[name="Mod0InlineAdd"]');
addbutton.addEventListener("click", function(event){
location.reload()

});

});
</script>

 

[deemuss]

If the same solution is used for a single DataPage (for any reason), the following modification of the script would work:

 

<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.href = window.location.href;
       });
  });
  
});
</script>