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
reach2paulreach2paul 

actionFunction rerender issue

Hi,

We have an actionFunction to rerender different panels and components of the page. But recently we noticed that after rerendering the VF components the following html code is generated. This code generated is not related to any of the codes or scripts within my workspace.


{code:xml}
try{if(!document.getElementById('datePicker')){var bodyEl=document.body;var div=document.createElement('div');div.innerHTML='<div class="datePicker" id="datePicker"><div class="dateBar"><img src="/s.gif" alt="Previous Month" class="calLeft" onblur="this.className = \'calLeft\';" onclick="DatePicker.datePicker.prevMonth();" onfocus="this.className = \'calLeftOn\';" onmouseout="this.className = \'calLeft\';" onmouseover="this.className = \'calLeftOn\';" title="Previous Month"/><select id="calMonthPicker" name="calMonthPicker" title="Month"><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select><img src="/s.gif" alt="Next Month" class="calRight" onblur="this.className = \'calRight\';" onclick="DatePicker.datePicker.nextMonth();" onfocus="this.className = \'calRightOn\';" onmouseout="this.className = \'calRight\';" onmouseover="this.className = \'calRightOn\';" title="Next Month"/><select id="calYearPicker" name="calYearPicker" title="Year"><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option></select></div><div class="calBody"><table class="calDays" border="0" cellpadding="0" cellspacing="0" id="datePickerCalendar"><tr><TH class="dayOfWeek" scope="col">Sun</TH><TH class="dayOfWeek" scope="col">Mon</TH><TH class="dayOfWeek" scope="col">Tue</TH><TH class="dayOfWeek" scope="col">Wed</TH><TH class="dayOfWeek" scope="col">Thu</TH><TH class="dayOfWeek" scope="col">Fri</TH><TH class="dayOfWeek" scope="col">Sat</TH></tr><tr class="calRow" id="calRow1"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);">&nbsp;</td></tr><tr class="calRow" id="calRow2"><td onblur="hiOff(this);" ...;
{code}

Have anyone come across this issue?

Thanks
Avidev9Avidev9
Looks like the code is for some date field. Can you post your VF page code ? Which component you are rerendering ?
reach2paulreach2paul
Thanks for your comment. 

I don't have any code related to datepicker. I just found out that this issue happens only with the sandbox that is updated with Spring'14 release. It works fine with the sandox that still runs with patch winter'14. 

I am trying to rerender the tab component after the execution of an actionFunction. I marked thosed lines in bold.

Please find the code below :
<apex:page controller="CustomerSummary_Controller">
<body>
    <div id="header" style="display: {! IF(SuppressUI, 'none', 'block')};">
        <div id="productImage">
            <!-- Logo to display -->
            <script type="text/javascript">
                // TODO: Swap out logos based on product. Use div background image css.
            </script>
        </div>
        <div id="customerName">
            <h1 style='white-space:nowrap;'>{!CustomerInformation.PrimaryFullName}</h1>
            <br/>
            <apex:outputLabel value="Product: " for="ProductName" />
            <apex:outputText value="{!CardInformation.Product}" id="ProductName" />
        </div>
        <div id="cardInfo">
            <apex:pageBlock mode="maindetail">
                <apex:pageBlockSection columns="3">
                    <apex:outputText value="{!CardInformation.CardStatus}" label="Card Status:" />
                    <apex:outputText value="{!CardInformation.CardType}" label="Card Type:" />
                    <apex:outputText value="{!CardInformation.CardBalance}" label="Card Balance:" />
                    <apex:outputText value="{!CardInformation.AccountStatus}" label="Account Status:"/>
                    <apex:outputText value="" rendered="{!CardInformation.IsVIPEnrolled}" label="VIP Customer" />
                 <apex:outputText value="{!CardInformation.NextMMFDate}" label="Next MMF Date:" />
                </apex:pageBlockSection>
            </apex:pageBlock>
        </div>
    </div>
    <!-- End Header -->
   
    <apex:pageMessages id="pageMessages" />
   
    <div id="main">
   
    <div id="leftColumn">
            <div style="padding-bottom: 4px; margin-left: 20%;">
            <apex:form id="scriptform">
                <apex:outputLabel value="Language" for="languagePref" title="Customer's language preference. Set by IVR initially."/>
                <apex:outputPanel id="scriptLangPnl">
                <apex:selectList size="1" value="{!CustomerInformation.Language}" multiselect="false" id="languagePref" onchange="changeLanguage();">
                    <apex:selectOption itemValue="English" itemLabel="English"/>
                    <apex:selectOption itemValue="Spanish" itemLabel="Spanish"/>
                </apex:selectList>
                </apex:outputPanel>
            </apex:form>
            </div>
            <div id="agentScript" class="languagePane">
                <apex:pageBlock title="Script">
                 <apex:outputPanel id="agentScriptPnl">
                     <apex:outputText styleClass="externalscript" id="external_script" value="{!AgentScript}" escape="false"/>
                     <script>
                      // For SD-96026 - Removed oncomplete from SwitchTabJS actionFunction to fix this issue.
                      changeLanguage();
                     </script>
                    </apex:outputPanel>
                </apex:pageBlock>
            </div>
            <div id="agentInstructions" class="languagePane">
                <apex:pageBlock title="Instructions" >
                <span id="instructions" style="display:none">
                     If the customer mentions one of the topics below, nagivate directly to that process by clicking one of the links below.
                    </span>
                    <span id="CardAccountinstruction" style="display:none">
                    Transfer to Loss Management.
                    </span>
                    <span id="DisallowCardinstruction" style="display:none">
                    Transfer to Loss Management (requires OOW).
                    </span>
                </apex:pageBlock>
            </div>
            <div id="quickMenu" class="languagePane">
                <apex:pageBlock title="Quick Menu" id="QuickMenu" rendered="{!!SuppressUI}">
                    <div id="linkList">
                        <span id="SecondCardSpan" style="display:{!IF((AllowSecondCard),'block', 'none')}">
                            <a href="#" onclick="AddSecondCardJS();">Second Card</a>
                        </span>
                        <span id="CardReplacementSpan">
                        <apex:form >
                            <!-- <a href="#" onclick="ReplaceCardJS();">Card Replacement</a>-->
                                <apex:commandLink action="{!SwitchTab}" title="Card Replacement" value="Card Replacement">
                                  <apex:param assignTo="{!ActiveTab}" value="cardReplacement"/>
                                </apex:commandLink>
                        </apex:form>
                        </span>
                        <div id="bottomList" >
                            <!-- <a href="#">Close Account</a><br/> -->
                        </div>
                    </div>
                </apex:pageBlock>
            </div>
        </div>
   
        <div id="tabs">
          <apex:form id="CustomerSummaryForm">
           <apex:inputHidden value="{!ActiveTab}" id="ActiveTab"/>
           <apex:inputHidden value="{!replacementModeStatus}" id="replacementModeStatus"/>
           <apex:actionStatus id="status" onstart="openStatus();" onstop="closeStatus();"/>
            <apex:actionFunction name="createActivityJS" action="{!createActivity}" rerender="customerEncryptionOptions,cardEncryptionOptions" >
           <apex:param name="unMaskedField" value="" assignTo="{!unMaskedField}"/>
         </apex:actionFunction>
            <apex:actionFunction name="SwitchTabJS" action="{!SwitchTab}" status="status" rerender="agentScriptPnl,agentInstructions" oncomplete="toggleDisplayShowInfo();closeStatus();">
                <apex:param name="ActiveTab" value="" assignTo="{!ActiveTab}" />
            </apex:actionFunction>
            <apex:actionFunction name="AddSecondCardJS" action="{!AddSecondCard}" rerender="agentScriptPnl,agentInstructions,replacementModeStatus" oncomplete="changeLanguage();toggleDisplayShowInfo();"/>
            <apex:actionFunction name="SwitchScriptJS" action="{!SwitchScript}" rerender="external_script,agentScriptPnl,agentInstructions" oncomplete="changeLanguage();">
             <!-- <apex:param name="SelectedReason" assignTo="{!CardInformation.selectedReason}" value=""/>-->
            </apex:actionFunction>
            <apex:actionFunction name="recallSwitchTabJS" action="{!SwitchTab}" status="status" rerender="tabPanel,replacementModeStatus" oncomplete="hideContent();">
    <apex:param name="replacementModeStatus" value="" assignTo="{!replacementModeStatus}" />
   </apex:actionFunction>
            <div id="customerEncryptionOptions" style="display:{!IF (UnmaskFields != '','block','none')}">
                <select id="customerEncryptionSelect" multiple="multiple">
                    <option value="Secondary SSN">Secondary SSN</option>
                    <option value="Secondary DOB">Secondary DOB</option>
                 <option value="Primary SSN">Primary SSN</option>
                 <option value="Primary DOB">Primary DOB</option>
             </select>
          </div>
          <div id="cardEncryptionOptions" style="display:{!IF (UnmaskFields != '','block','none')}">
             <select id="cardEncryptionSelect" multiple="multiple">
                 <option value="Primary Card Reference">Primary Card Reference</option>               
                 <option value="Primary Account Number">Primary Account Number</option>
                 <option value="Activation PIN">Activation PIN</option>                   
              </select>
           </div>
           </apex:form>
            <apex:tabPanel switchType="server" id="tabPanel" value="{!ActiveTab}"  >
                 <apex:tab label="Customer Info" name="customerInfo" id="customerInfo" switchType="server" ontabenter="SwitchTabJS('customerInfo')" rendered="{!!SuppressUI}">
                     <div class="tabPage">
                         <apex:include id="customerInfoPage" pageName="CustomerInfo" />   
                     </div>
                 </apex:tab>
                <apex:tab label="Card Info" name="cardInfo" id="cardInfo" switchType="server" ontabenter="SwitchTabJS('cardInfo')" rendered="{!!SuppressUI}">
                    <div class="tabPage">
                        <apex:include id="cardInfoPage" pageName="CardInfo" />
                    </div>
                </apex:tab>
                <div id="cardReplacementPageTab">
                 <apex:tab label="Card Replacement" name="cardReplacement" id="cardReplacement" switchType="server" rendered="{!DisplayCardReplacementTab}" rerender="pageMessages" ontabenter="SwitchTabJS('cardReplacement')">
                     <div class="tabPage">
                         <apex:include id="cardReplacementPage" pageName="CardReplacement" />
                     </div>
                 </apex:tab>
                </div>
            </apex:tabPanel>
        </div>
    </div>
   
    <script type="text/javascript">   
                       
       
    </script>
   
</body>

</apex:page>
benton22cbenton22c
I have the same issue. Did you ever find a resolution?