function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
BrianWKBrianWK 

Updating display value with Javascript on Output Text and Output Fields

Okay,

 

I'm feeling incredibly stupid here. I've been using a Apex Class to handle a lot of the calculations for a page. This works and it also incredibly slow. There are multiple inputs with each one requiring a series of calculations and partial page re-renders. This causes a lot of slow down with all the client -> server communication.

 

So, I'm switching to Javascript. I've had some success with all the references and websites out there. I've successfully updated all the calculations that are done on InputText and InputField components. My issue is that this doesn't seem to work on OutputText and Outputfields.

 

Here's a quick example. It's more complex than this but really simply I'm having a javascript function populate InputFields, OutputFields and OutputText after the function is called.

 

<apex:page id="thepage">
<script type="text/javascript">
	function jsUpdateFields(){
		var vnum = 10;
		var vdollar = 5;
		var vtext = 'hello';
		
		document.getElementByID('{!Component.thepage.theform.thepageblock.InputField}').value = vnum;
		document.getElementByID('{!Component.thepage.theform.thepageblock.OutputField}').value = vdollar;
		document.getElementByID('{!Component.thepage.theform.thepageblock.OutputText}').value = vtext;
		return false;
	}
</script>
	<apex:form id="theform">
		<apex:pageblock id="thepageblock"
			<apex:inputfield value="{!Myobject.MyNumber__c}" id="InputField" />
			<apex:outputfield value="{!MyObject.MyCurrency__c}" id="OutputField" />
			<apex:outputtext value="{!MyObject.CustomText__c}" id="OutputText" />
		<a href="#" onclick="jsUpdateFields()">Run Javascript</a>
		</apex:pageblock>		
	</apex:form>
</apex:page>

 What happens: The inputfields update perfectly. The outputField and OutputText have no updates. If I change those components to inputs they work fine.

Here's the thing I don't want to have those to be inputs.

 

I've also tried using an apex function that calls the javascript function and then rerenders an outputpanel where my output fields are located. This also doesn't seem to work.

help! and thank you

Best Answer chosen by Admin (Salesforce Developers) 
Shashikant SharmaShashikant Sharma

Hi 

 

Use this 

                    document.getElementById('{!$Component.thepage.theform.thepageblock.OutputField}').innerHTML = vdollar;                
                    document.getElementById('{!$Component.thepage.theform.thepageblock.OutputText}').innerHTML = vtext;

 In this i have used innerHTML instead of value as outfutfield and   outputtext render as span.

 

 

All Answers

Shashikant SharmaShashikant Sharma

Hi 

 

Use this 

                    document.getElementById('{!$Component.thepage.theform.thepageblock.OutputField}').innerHTML = vdollar;                
                    document.getElementById('{!$Component.thepage.theform.thepageblock.OutputText}').innerHTML = vtext;

 In this i have used innerHTML instead of value as outfutfield and   outputtext render as span.

 

 

This was selected as the best answer
BrianWKBrianWK

Beautiful! Shashikant Sharma - you have just made my week. I've been trying to figure this out for hours!

JSONHammerleJSONHammerle
Yes, thank you very much :)
Dinesh BharadwajDinesh Bharadwaj
i am facing the same issue, i tried with the best answer which is suggested but not useful.
I am using pageblocktable will it make any difference..?