Show or Hide a div based on virtual field in html block

[DesiLogi]

Hi,

I have an html block in a Details page where I'm trying to show/hide a div based on the value of a Virtual field. The virtual field is set to Hidden and gets an Authentication value on load for data (a country name, in this case).

I can't quite get the show/hide to work. I've used this code before and it works well so there must be some syntax mistake in this example. Does anyone have an idea with that might be? Thanks!

<div id="section1">Print AUS Version</div>


<script>
  var v_virt = document.getElementByID("cbParamVirtual13").value;

if(v_virt=="Australia")
{
  document.getElementById('section1').style.display = "block";
}
else
{
  document.getElementById('section1').style.display = "none";
}
</script>

 

[MayMusic]

Try to change your div to table tag:

<table id="section1" style="display:none;"><td>Print AUS Version</td></table>

If it does not help send me the link to the details page

[DesiLogi]

Hi MayMusic,

Thanks for the tip- unfortunately I still can't get it to work. I checked to make sure the variable is reading the virtual field's value and it wasn't- so I changed it to document.getElementsByName("cbParamVirtual13")[0].value; and used an alert box to test it. Now it gets the virtual field value correctly so that's not an issue. 

I've used the code to show/hide a div before so I'm not sure what could be different here. The 'table' method didn't work either. Unfortunately I can't link to the page because it's heavily authenticated in the app. Maybe the quotes need to be singles? Not sure what to try...

[thirdcharm]

On 3/2/2018 at 12:09 PM, DesiLogi said:

Hi MayMusic,

Thanks for the tip- unfortunately I still can't get it to work. I checked to make sure the variable is reading the virtual field's value and it wasn't- so I changed it to document.getElementsByName("cbParamVirtual13")[0].value; and used an alert box to test it. Now it gets the virtual field value correctly so that's not an issue. 

I've used the code to show/hide a div before so I'm not sure what could be different here. The 'table' method didn't work either. Unfortunately I can't link to the page because it's heavily authenticated in the app. Maybe the quotes need to be singles? Not sure what to try...

Hi DesiLogi,

Place this code in a HTML Block

<div id="section1">Print AUS Version</div>

Create Header/Footer then place this code in the Footer

<script>
window.onload = function(){
	var v_virt = document.getElementById('cbParamVirtual13').value;

	if(v_virt=="Australia") {
  		document.getElementById('section1').style.display = "block";
	}
	else {
  		document.getElementById('section1').style.display = "none";
	}
}
</script>

 

[douvega]

Hi,

Your original code seems to be right but just a little detail in the first line of your script. You have document.getElementByID with uppercase ID, change that part to document.getElementById and let us know if it works.

Regards.

[DesiLogi]

Hi Douvega- the variable was gotten correctly for Virtual13's value, even with the capital 'D'. I did overlook that and changed it to lowercase 'd' but it did not fix the issue. As I've said, the variable is correctly saved, it's the other code that's not working in terms of show/hide the div. 

Hi ThirdCharm- thanks for the code on this. Only issue is the window.onload doesn't work with Caspio's new deploy code.

Finally got this to work:  I had another html block with a div 'Section1' in it and that was blocking this code from working. Totally overlooked it- it's a complicated datapage. But the code is working now. Thanks all for your help on this, sometimes one just has to dig in further to find the solution and advice like this always helps. 

[alineer]

Use this.:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  //your code here.
  });    
    
</script>