Jump to content
rush360

Hide HTML Blocks in Detail Page

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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> 

 

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

 

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

×
×
  • Create New...