Jump to content
  • 0

Only refresh datapage not entire page




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?


Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 1

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>
<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){
      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
        //Removes datapage if it already exist
        //Adds new datapage
    } else {

Hope this helps.




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...