Jump to content

Unhide next datapage


Recommended Posts

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!  

Link to comment
Share on other sites

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

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.

Guest
Reply to this topic...

×   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...
 Share

×
×
  • Create New...