Hide HTML Blocks in Detail Page

[rush360]

I would like to Hide  HTML block(s)   when the value of one of the fields called in the HTML Block is blank.    Below the HTML from one of the blocks. I would like to hide this block if the field Zip3 is blank: 

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">[@field:Address3_Type]<br />
[@field:Address3_Time@]&nbsp;on [@field:Address3_Time*]</div>

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">Address:<br />
[@field:Address3]<br />
[@field:City3], [@field:State3]<br />
[@field:Country3], [@field:Zip3]</div>

I also have 3 other    similar HTML Blocks that would be hidden if fields Zip4, Zip5 & Zip6 are blank. 

[rush360]

Is this possible?

[cheonsa]

Hi @rush360,

You can actually place these HTML blocks in another section. Then, add a rule that if the field is blank, then hide this section. 

Cheers!

[geoffdude]

If you want to hide the info on result page of some kind, give your DIV an ID (use "box1") then try this:

<script type="text/javascript">
document.addEventListener('DataPageReady', window.onload = function(){ 

var x = document.getElementsByName("InsertRecordZip3")[0].value;
	
if (x == "") {
  document.getElementById("box1").style.display = 'none';
       alert("Nothing entered - box hidden");
} 
	else {
document.getElementById("box1").style.display = 'block';
 alert("Word entered - box not hidden");
 }

});
</script>

<!-- add a style tag, with "box1" display set to 'block', then update your code for the DIV as below -->
<style> #box1 {display:block}</style>

<div id="box1" style="background:#eee;border:1px solid #ccc;padding:5px 10px;">Address:<br />
[@field:Address3]<br />
[@field:City3], [@field:State3]<br />
[@field:Country3], [@field:Zip3]</div> 

 

[ryancys]

Hi @geoffdude

I got a similar issue where I want to call some JavaScript when a Data Page is loaded.

My question is: Where to amend and add that JavaScript?

Tks

Regards,
Ryan

[cheonsa]

Hi @ryancys, 

16 hours ago, ryancys said:

Hi @geoffdude

I got a similar issue where I want to call some JavaScript when a Data Page is loaded.

My question is: Where to amend and add that JavaScript?

Tks

Regards,
Ryan

You can add the JavaScript on the Header/ Footer or HTML Block. https://howto.caspio.com/faq/caspio-bridge-8-4/inserting-code-in-html-blocks-and-header-footer/

[rush360]

Hi @geoffdude...thank you for the reply. Below is based on what you sent me....alas, on the record I am testing on has a value in the field 'Zip3' the block is still hidden by the following javascript: 

<script type="text/javascript">
document.addEventListener('DataPageReady', window.onload = function(){ 

var x = document.querySelector("#EditRecordZip3\\$Anchor").value;
 
if (x == "") {
  document.getElementById("box1").style.display = 'none';
} 
 else {
document.getElementById("box1").style.display = 'block';
 }

});
</script>

--

<style> #box1 {display:block}</style>
<div id="box1" style="background:#eee;border:1px solid #ccc;padding:5px 10px;">[@field:Address3_Type]&nbsp;[@field:Verb3]<br />
[@field:Address3_Time@] [@field:Address3_Time*]
<hr />Address:<br />
[@field:Address3]<br />
[@field:City3], [@field:State3]<br />
[@field:Country3], [@field:Zip3]</div>

 

Any ideas where I've gone wrong?  I also need to conditionally hide three other blocks with this javascript.  I assume I need to create #box2, #box3, #box4 for each of the 3 other blocks I want to hide  but am unsure of how to add the "boxes" to the script? 

Many thanks!

[Hastur]

@rush360

The script you use now does not make any sense as it sets the .onload listener at the moment when DataPage is ready. It is like you trying to go home when you are already at home...

You may create function to check each parameter and then hide the appropriate block.
Example:

 

<script type="text/javascript">
function hideBlocks() {
 var zipValue = '[@field:Zip3]';
 if(zipValue === '') { 
  document.getElementById('box1').style.display = 'none';
 }
 document.removeEventListener('DataPageReady', hideBlocks);
}

document.addEventListener('DataPageReady', hideBlocks);
</script>


<!-- Your HTML code -->

<div id="box1" style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
 	<p>[@field:Address3_Type] [@field:Verb3]</p>
	<br />
	<p>[@field:Address3_Time@] [@field:Address3_Time*]</p>
	<hr />
  	<p>Address:</p>
  	<br />
	<p>[@field:Address3]</p>
  	<br />
	<p>[@field:City3], [@field:State3]</p>
  	<br />
	<p>[@field:Country3], [@field:Zip3]</p>
</div>

 

[NJVideoGuy]

I'm trying to do something similar and I found this thread. When I apply the following code to my HTML Block, it only affects the first line on my data listing page.  I set an alert to try to see what the value was and it appears that its referencing the last record in my list that is empty, not the current one. (If I add data to that item, then it references the next item in the list that is empty...)  Perhaps the code needs to be somewhere else? What am I missing? Any assistance would be appreciated.

Here is the code I have in my HTML Block

<script type="text/javascript">

function hideBlocks() {
 var zipValue = '[@field:Project_Notes]';
 var RecNum = '[@field:Record_Number]';

if(zipValue.length==0) { 
  document.getElementById('box1').style.visibility = 'hidden';
window.alert(zipValue + RecNum); // This is the alert I was using to troubleshoot
 }
 document.removeEventListener('DataPageReady', hideBlocks);

}

document.addEventListener('DataPageReady', hideBlocks);

</script>

<div id="box1" class="tooltip" href="#">NOTES<span class="classic">
[@field:Project_Notes]<br/>
</span></div>