Only refresh datapage not entire page

[CraigSZ]

Hi,

I have a single HTML page which contains 2 datapages and it is hosted on Weebly.

The top datapage (Teams) is a tabular report and I have a button on each Team record that can be clicked to show all filtered records in the bottom datapage (Games) for the selected Team.

My problem is that the entire HTML page refreshes on the button click and the user must scroll back down the page to find their place.

Is there are way to only refresh the bottom datapage and not refresh the entire HTML page?

TIA

[Vitalikssssss]

Hi @CraigSZ,

Here is a page which has a Chart page dynamically rendered depending on which button was clicked.

You would need to have some div element which would serve as a container for updated Datapage.

<div id="datapage-container"></div>

Here is a code which I have in Datapage.

1. HTML block with buttons:

<div class="buttons"><input id="[@field:Name]" type="button" value="Sales in Eastern region"></div>
<br>
<div class="buttons"><input id="[@field:Name]" type="button" value="Sales in Central region"></div>

2. JavaScript snippet which render Datapage and also pass parameters:

<script type="text/javascript">
 
document.addEventListener('DataPageReady', addEvents);

//Add event listeners to buttons

function addEvents(){

    const buttons = document.querySelectorAll("input[type='button']");

    buttons.forEach(element => {
        element.addEventListener('click', showDp)
    });

}
  
//Checks which button is clicked and pass different parameters
  
function showDp(e){
    if(e.target.value.includes('Eastern')){
      createPage('Eastern', e.target.id);
    }
    else if (e.target.value.includes('Central')){
        createPage('Central', e.target.id);
    }
}

//Removes old DataPage if it exist and creates new one  
  
function createPage(par1, par2) {
        
    const newDataPage = document.createElement('script');
    const container = document.querySelector('#datapage-container');
    newDataPage.src = `https://xxxxxx.caspio.com/dp/xxxxxxxxxxxxxxxxxxxxxxxx/emb?region=${par1}&name=${par2}`; //Deploy code of new Datapage 
    //Checks if there is a DP rendered already
    if(container.firstChild){
        //Removes datapage if it already exist
        while(container.firstChild){
            container.firstChild.remove();
        }
        //Adds new datapage
        document.getElementById('datapage-container').appendChild(newDataPage);
    } else {
    document.getElementById('datapage-container').appendChild(newDataPage);
    }
}        
 </script>

Hope this helps.

Regards,

vitalikssssss

 

[Vitalikssssss]

Hi @CraigSZ,

You may utilize the concept explained in this post:

 

Hope this helps.

Regards,

vitalikssssss

[CraigSZ]

Thanks Vitalikssssss. I unfortunately cannot access the original posters site to see the suggested AJAX script in context or see how the full solution is deployed in the HTML block. 

Regards,

Craig

[CraigSZ]

Hi @Vitalikssssss,

Thank you very much for taking the time to provide your response. I will work through it and incorporate into my app. Will update once I've completed it.

Regards,
Craig

[CraigSZ]

Hi @Vitalikssssss

Your solution works brilliantly. Thank you very much!

Regards,

Craig