+ Start a Discussion

outputPanel flickering with Javascript function

Hello everyone,

It is probably simple but I cannot find the solution.

With the code below the outputPanel is not stable. I tried all browsers. Why?

The same code works fine in a pure HTML page.

Note: With the JS script not embedded in a function, it works fine.

Thanks a lot for your help.



<apex:page controller="CNModConConContJS" sidebar="false" showHeader="false" id="CNModConConJS" >
<apex:form >
<p>ConsoL100km__c =</p>
<apex:inputField value="{!Modelv.ConsoL100km__c}" id="consoL100kmIF" />
var ConsoL100kmIF = document.getElementById("{!$Component.consoL100kmIF}");
<apex:commandButton value="Conso Converter" onclick="consoMilGalCal()" reRender="ConsoMilGal"/>
<apex:outputPanel id="ConsoMilGal">
<p id="consoL100kmP"></p>
<p id="consoMilGalP"></p>
<script type="text/javascript">
function consoMilGalCal(form){
var ConsoL100kmJS = parseFloat((ConsoL100kmIF.value).replace(",",".")).toFixed(2);
var ConsoMilGalJS = (237/ConsoL100kmJS).toFixed(2);
var TextConsoL100km = 'JS Value of ConsoL100km =';
var TextConsoMilGal = 'JS Value of ConsoMilGal =';
document.getElementById("consoL100kmP").innerHTML = TextConsoL100km+ConsoL100kmJS;
document.getElementById("consoMilGalP").innerHTML = TextConsoMilGal+ConsoMilGalJS;


Remove the rerender attribute from the command button. You are updating the elements directly using javascript so you don't need to re render the output panel.


Hi Dave,

Thanks for your quick reply. Did you try it?  It does not work for me; The output panel is still 'flickering". Any other idea?

Thanks again for your help,