+ Start a Discussion
DodiDodi 

Java script variable not changing without a browser refresh

Hi I have a visual force page which has a table of records to be processed. Most everything works as expected except one minor issue.

 

I am trying to display an alert message via the jave script "Alert"  function below. The message displays as expected, but the variable for {!workOrderCount2Remove} does not change in the jave script "alert" function. However the variable changes as expected when I reference it directly in my output panel with the vf form. I am guessing because this is processed server side but the java script runs in the browser and the variable is not resetting for some reason. So how can I accomplisth this without a refresh? My rerendering works for the tables and panel, only the variable callerd in the java script is set on the initial page load and never again without a refresh. Hope this issue makes sense.

 

Thanks

 

 

<apex:page controller="ManifestMaintenanceController">
<script type="text/javascript">
    function checkAll(cb,cbid)
        {
            var inputElem = document.getElementsByTagName("input");                    
            for(var i=0; i<inputElem.length; i++)
            {            
                 if(inputElem[i].id.indexOf(cbid)!=-1){                                       
                    inputElem[i].checked = cb.checked;
                }
            }
        }
        </script>
        
 <script type="text/javascript">
    
    function alert() {

    var myVar = '{!workOrderCount2Remove}';
     
   if (  '{!workOrderCount2Remove}' == 0 ) {
        alert('There are no manifest lines available to remove. MyVar = ' + '{!workOrderCount2Remove}');
    }
    else {
        alert('MyVar Count is ' +  '{!workOrderCount2Remove}');
          myVar = 0;
    }
        }
      
     
</script>



      <apex:form >
    
          <apex:pageBlock >
              <apex:pageBlockButtons >
                  <apex:commandButton value="Remove from Manifest" action="{!processRemoveSelected}" rerender="table, panel"  onclick="alert();" />
                  <apex:commandButton value="Return to Manifest" action="{!pageCancel}"/>
              </apex:pageBlockButtons>
              
               <apex:outputPanel id="panel">
               <apex:outputText style="font-style:italic" value="Manifest lines available to remove: {0}">
                          <apex:param value="{!workOrderCount2Remove}"/>
                      </apex:outputText>
                </apex:outputPanel>
              
              <!-- In our table we are displaying the records -->
              <apex:pageBlockTable value="{!serviceOrderLines2Remove}" var="c" id="table">
                  <apex:column ><apex:facet name="header">
                      <!-- This is our selected Boolean property in our wrapper class -->
                      <apex:inputCheckbox value="{!c.selected}" onclick="checkAll(this,'checkedone')" />
                         </apex:facet>
                        <apex:inputCheckbox value="{!c.selected}" id="checkedone"/></apex:column>
                 
                 <apex:column headerValue="Work Order Line">
                      <apex:outputLink value="/{!c.con.id}">{!c.con.Name}</apex:outputLink>
                  </apex:column>
                  <apex:column headerValue="Activity Type" value="{!c.con.SVMXC__Activity_Type__c}" />
                  <apex:column headerValue="Line Type" value="{!c.con.SVMXC__Line_Type__c}" />
                  <apex:column headerValue="Line Status" value="{!c.con.SVMXC__Line_Status__c}" />
                  <apex:column headerValue="Received City" value="{!c.con.SVMXC__Received_City__c}" />
                  <apex:column headerValue="Quantity Shipped" value="{!c.con.SVMXC__Quantity_Shipped2__c}" />
                  <apex:column headerValue="Work Order" value="{!c.con.SVMXC__Service_Order__c}" />
                  <apex:column headerValue="Work Description" value="{!c.con.SVMXC__Work_Description__c}" />
              </apex:pageBlockTable>
          </apex:pageBlock>
     </apex:form>
</apex:page>

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
izayizay

To fix this problem simply place the javascript code between apex:outputPanel tag and re-render the tag with the command button the same way you re-render the table and other panel.

 

Ex.

 

<apex:outputPanel id="jsPanel">

   
 <script type="text/javascript">
    
    function alert() {

    var myVar = '{!workOrderCount2Remove}';
     
   if (  '{!workOrderCount2Remove}' == 0 ) {
        alert('There are no manifest lines available to remove. MyVar = ' + '{!workOrderCount2Remove}');
    }
    else {
        alert('MyVar Count is ' +  '{!workOrderCount2Remove}');
          myVar = 0;
    }
        }
      
     
</script>
</apex:outputPanel>


<apex:commandButton value="Remove from Manifest" action="{!processRemoveSelected}" rerender="table, panel, jsPanel"  onclick="alert();" />

 

 

Hope this helps!