Jump to content
  • 0
Sign in to follow this  
CraigSZ

Only refresh datapage not entire page

Question

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

Share this post


Link to post
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>
<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

 

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

×
×
  • Create New...