Jump to content
  • 0
Sign in to follow this  
Prophecy

Dynamic Sections in Datapages

Question

How do I write the correct JavaScript to deploy dynamic sections within a datapage?
I have 3 sections containing a HTML block with different content in each.
Based on a calculated field which contains a percentage. I only want to show the relevant section and hide the others
Section 1 = % range >0 & < 33
Section 2 = % range >34 & < 66
Section 3 = % range >66 & < 100

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 1

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

Share this post


Link to post
Share on other sites
  • 0

I have placed a HTML block above and below as recommended and I've tried this code below with no result?

if ([@field:Health_Check_Total_Score%] < 33) {<div id="Section_2"

} else if ([@field:Health_Check_Total_Score%] < 66) {<div id="Section_3"

} else {<div id="Section_4"
}

Share this post


Link to post
Share on other sites
  • 0
On 9/28/2019 at 5:44 AM, MayMusic said:

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

I have placed a HTML block above and below as recommended and I've tried this code below with no result?

if ([@field:Health_Check_Total_Score%] < 33) {<div id="Section_2"

} else if ([@field:Health_Check_Total_Score%] < 66) {<div id="Section_3"

} else {<div id="Section_4"
}

Share this post


Link to post
Share on other sites
  • 0
On 9/28/2019 at 5:44 AM, MayMusic said:

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

Hi MayMusic,

I really appreciate your assistance!  I've placed the the block above and below as advised and attempted the JS code myself with no result.

Please review my JS and let me know where I've gone wrong?

<script>

var calcField = [@field:Health_Check_Total_Score#]; 

if (calcField < 33) {
  document.getElementById('Section_2').style.display = 'block';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'none';
} elseif (calcField < 66) {
  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'block';
  document.getElementById('Section_4').style.display = 'none';
} elseif (calcField < 100) {
  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'block';
}
</script> 

Share this post


Link to post
Share on other sites
  • 0

Hi @Prophecy,

First, you should use Caspio`s build-in event handlers (e.g. Datapage ready).

Second, you should change the way how you trying to reference calculated field.

You use Submission form along with Calculated Value form element as I have understood.

If my assumption is correct than you can use the following code:

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

Some text Section 2

</div>
  
<div id="Section_3" style="display:none;">

Some text Section 3

</div>
  
<div id="Section_4" style="display:none;">

Some text Section 4

</div>

<-- This code goes into Datapage footer-->
  
<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

let calcField 

setInterval( function() {
  
  calcField = document.querySelector("[id^='InsertRecordText']").innerHTML; //insert your field name i.o. Text
  
  Hide(calcField); 

}, 2000); //interval of function execution 2 sec

function Hide (calcField) {

if (calcField < 33) {

  document.getElementById('Section_2').style.display = 'block';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'none';
} else if (calcField < 66 && calcField >= 33 ) {

  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'block';
  document.getElementById('Section_4').style.display = 'none';

} else if (calcField < 100 && calcField >= 66) {

  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'block';

}
}       
});
</script>

Hope this helps.

Regards,

vitalikssssss

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