function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Walter@AdicioWalter@Adicio 

Why is the javascript able to change outputText in the page, but not in the dataTable?

Can someone help me understand why this javascript is able to change the outputText in the page, but not able to change the outputText in the list?

This might not be the right way to start going about this but I am trying to find a way to toggle visibility of a value in a column for a record if that record meets certain criteria, and only that record in the list, not the other records in the list.

 

 outputText in the page:

 

 

<apex:page>

 

<script>

function changeVisibility() {

var item = document.getElementById('{!$component.msgpost}');

if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }

else { item.style.visibility = 'visible'; } }

</script>

 

<input type="button" onclick="changeVisibility()" />

 

<apex:outputText id="msgpost" value="Show/hide me!"/>

 

</apex:page>
 
 outputText in the list: 


<apex:page standardController="sfObject" extensions="myExtension"> 

<script>
function changeVisibility() {      
var item = document.getElementById('{!$component. myChange}');   
if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }	
else { item.style.visibility = 'visible'; }   
}
</script> 

<input type="button" onclick="changeVisibility()" /> 

<apex:dataTable value="{!myQuery}" var="myLineItem">
<apex:column>
<apex:outputPanel layout="block" id="myChange">
<apex:outputField value="{!myLineItem.myField__c}" />
</apex:outputPanel></apex:column>
</apex:dataTable>

</apex:page> 
 
Thank you. 



 


Best Answer chosen by Admin (Salesforce Developers) 
mattdarnoldmattdarnold
I think the problem is that the ID isn't going to be myChange for each element it is going to be myChange with some string appended to it to signify the iteration within the datatable. Take a look at the source for the generated page and I think you'll see what I mean.

Instead of trying to access the outputText through its ID, you could instead try to access it with its class name (you'd need to assign a custom/unique class to this element). Take a look at this page that provides a sample getElementsByClassName function: http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/. This would allow you to change the outputText element for all rows within the datatable - which is what it seems like you're trying to do.

-- Matt


All Answers
mattdarnoldmattdarnold
I think the problem is that the ID isn't going to be myChange for each element it is going to be myChange with some string appended to it to signify the iteration within the datatable. Take a look at the source for the generated page and I think you'll see what I mean.

Instead of trying to access the outputText through its ID, you could instead try to access it with its class name (you'd need to assign a custom/unique class to this element). Take a look at this page that provides a sample getElementsByClassName function: http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/. This would allow you to change the outputText element for all rows within the datatable - which is what it seems like you're trying to do.

-- Matt
This was selected as the best answer
Walter@AdicioWalter@Adicio
Thank you, I know your right about the iteration for the IDs, I will look into that.