Unhide next datapage

JMR21 · November 10, 2020

I have several datapages all embedded on a single web page. They use different tables and views and they are all connected via a search parameter that is passed on to each of them. To make sure the user updates each section as they move along and therefore update all the appropriate calculations and references, I would like to use javascript that will essentially keep the next section hidden until they update. Is there some code that accomplishes the "on click of button, unhide next datapage"? Thank you for any help you might have!

Vitalikssssss · November 11, 2020

Hi @JMR21,

It is possible to add a JavaScript snippet on web-page. Basically you would need to place your datapages in some block elements and change the style property of the block from "display:block;" to "display:none;". You may use "FormSubmitted" AJAX event of Caspio Datapage.

Here is an example of web-page that has 3 DP deployed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="page_1">
    <script type="text/javascript" src="https://xxxxxxx.caspio.com/dp/498c4000904cc6b6744049ea8b30/emb"></script>

</div>

<div id="page_2" style="display: none;">

    <script type="text/javascript" src="https://xxxxxxxx.caspio.com/dp/498c4000802149cd8ef64f44a37b/emb"></script>

</div>

<div id="page_3" style="display: none;">
    <script type="text/javascript" src="https://xxxxxxxxx.caspio.com/dp/498c4000e67cc919259840428b77/emb"></script>
</div>



<script type="text/javascript">
document.addEventListener('FormSubmitted', function(event) {
//checks if user forgot to input all required fields    
let err = document.querySelector(".cbFormCommonError");
	if (event.detail.appKey == '498c4000904cc6b6744049ea8b30' && !err ) {
              document.getElementById("page_1").style.display = "none";
              document.getElementById("page_2").style.display = "block";
       	} else if (event.detail.appKey == '498c4000802149cd8ef64f44a37b' && !err)    {
              document.getElementById("page_2").style.display = "none";
              document.getElementById("page_3").style.display = "block";
	}
});
</script>

    
</body>
</html>

Also, you may consider using an approach of rendering datapage "on fly" explained in this post.

Hope this helps.

Regards,

vitalikssssss

JMR21 · November 12, 2020

@VitalikssssssThank you so much for the help!

Login

Unhide next datapage

Recommended Posts

JMR21

Link to comment

Share on other sites

Vitalikssssss

Link to comment

Share on other sites

JMR21

Link to comment

Share on other sites

Join the conversation

Browse