0

enter image description herePlease find below code where I am facing problem with the reRender value. It's not working as expected. When I change Campaign value, as Product changes accordingly, Userlist below (which is in a different form) also needs to change accordingly. When I pass the campaign value in URL and reload the page, it's working fine. But I need not to do reload the page and handle the situation with reRender. Can someone please help? Change required in the highlighted reRender value, I am not getting what it should be. Apex page

  ....
   <apex:form id="frm1">    
     <div class="container-fluid">
    <a href="/apex/SampleDashboard" target="_top" class="btn">Back to Allocation</a>

             <div class="row">
                 <div class="col-md-12">
                     <div class="page-header">
                         <h1>
                             <small>
                                 <apex:outputText value="View/Transfer Product Allocations" rendered="{!userType != 'Rep' && userType != 'ReadonlyAdmin'}"/>
                                 <apex:outputText value="View Product Allocations" rendered="{!userType == 'Rep' || userType == 'ReadonlyAdmin'}"/>
                             </small>
                         </h1>
                     </div>
                 </div>
             </div>
      <apex:outputPanel id="pivot">
          <apex:outputPanel rendered="{!allocList.size == 0}">
               <div class="row">
                       <div class="col-md-12">
                        <div class="well well-lg">
                        <div class="row">

              <div class="col-md-6">

                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    Campaign
                                </h3>
                            </div>
                            <div class="panel-body"><center>
                          <!--    <apex:actionFunction name="AJAXRefresh" action="{!updProductList}" rerender="frm1,pivot" status="actStatusId"/>  -->

                                <apex:selectList value="{!selCampaign}"  size="1">  <!--  onchange="AJAXRefresh();"-->
                                <!-- onchange="document.location.reload(true);"  -->
                              <apex:selectOptions value="{!campaigns}"></apex:selectOptions>
                            **<apex:actionSupport event="onchange" action="{!updProductList}" status="actStatusId"  reRender="pivot,theTabPanel,tabOne,hierPb,pb"/>**
                              </apex:selectList>  </center>
                            </div>                        
                        </div>                       


                      </div>
              <div class="col-md-6">
                      <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    Product
                                </h3>
                            </div>
                            <div class="panel-body"><center>
                               <apex:selectList value="{!selectedProductlot}" size="1">
                                  <apex:selectOptions value="{!productList}"></apex:selectOptions>
                                  **<apex:actionSupport action="{!refreshAvailableQuantities}" event="onchange" status="actStatusId" reRender="pivot,theTabPanel,tabOne,hierPb,pb"/>**
                              </apex:selectList> </center>
                            </div>                        
                        </div>                              
                        </div> 
                      </div>    
                      </div> 
                      </div>    
                      </div>                              
          </apex:outputPanel>    
      </apex:outputPanel>

      </div>      

<apex:actionFunction name="setActiveTab" rerender="">
     <apex:param id="selTab" assignTo="{!selTab}" value=""/>
</apex:actionFunction>
     <div class="container-fluid">
     <div class="row">
                       <div class="col-md-12">
                        <div class="well well-lg">
        <apex:tabPanel tabClass="nav nav-tabs" contentClass="tab-content" switchType="client" value="{!selTab}" id="theTabPanel">
    <apex:tab label="View Allocation" name="View" id="tabOne">
    <div class="well well-lg">
    <apex:outputPanel id="hierPb">
    <ul id="treeDemo" class="ztree">
    </ul>    
    <script>
        var m = {
        <apex:repeat value="{!availableQtyMap}" var="Key">
            <apex:repeat value="{!availableQtyMap[Key]}" var="mvalue">
                "{!Key}" : {!mvalue},            
            </apex:repeat>
        </apex:repeat>}
        for (var i in zNodes) {
            var key = zNodes[i].userId;
            if(key != "" && zNodes[i].name != null)
                zNodes[i].name = zNodes[i].name.split("(")[0] + "(" +  m[key] + ")" ;
         }      
        if(document.readyState == 'complete')
        {
            j$.fn.zTree.init(j$("#treeDemo"), setting, zNodes);
        }
    </script>
    </apex:outputPanel>
    </div>
    </apex:tab>
    <apex:tab label="Transfer Allocation" rendered="{!userType != 'Rep' && userType != 'ReadonlyAdmin'}" name="Transfer" id="tabTwo">
    <div class="well well-lg">
        <apex:pageMessages rendered="{!errMsg}"></apex:pageMessages>
        <style>.homeTab .bPageBlock {
    border-top: 0px; solid #1797c0;
}
.bPageBlock .detailList tr td, .bPageBlock .detailList tr th {
    border-bottom: 0px; solid #1797c0;
}
</style>

        <apex:pageBlock id="pb" rendered="{!!errMsg}" >
<script>
    var orgRemainingQty = {!remainingQty};
    var remainingQty = {!remainingQty};
    function clearAllInputs()
    {
        j$(".inpTransQty").val(0).change(); 
        remainingQty = orgRemainingQty;
     //   document.getElementById('Remaining').innerHTML = remainingQty;  
    }


    function distributeSpecified(eachCount)
    {
        var fromUser = document.getElementById('pg:frm1:pb:pbs:pbsItem2:fromuser-id').value;
        if(fromUser == '') alert('Please Select from User');
        else
        {
            var prevEleId = "" + fromUser ;
            var prevEle = document.getElementById(prevEleId);
            var ele = j$(prevEle).prev();
            var totalUsers = j$(".inpTransQty:visible").not(ele).length;
            var maxCount = Math.floor(remainingQty/totalUsers);            
           if(eachCount > maxCount)
           {
               if(fromUser == '{!CurUser.Id}')
                   alert('You have insufficient allocations for distributing ' + eachCount + ' among ' + totalUsers + ' users.');
               else
                   alert('User has insufficient allocations for distributing ' + eachCount + ' among ' + totalUsers + ' users.');
           }
           else
           {  
            j$(".inpTransQty:visible").not(ele).val(function(i,c){ return parseInt(c)+parseInt(eachCount) }).change(); 
            remainingQty=remainingQty-(eachCount * totalUsers);
          //  document.getElementById('Remaining').innerHTML = remainingQty;    
           }
        }
    }    



    function distributeEqually()
    {
        var fromUser = document.getElementById('pg:frm1:pb:pbs:pbsItem2:fromuser-id').value;
        if(fromUser == '') alert('Please Select from User');
        else
        {
            var prevEleId = "" + fromUser ;
            var prevEle = document.getElementById(prevEleId);
            var ele = j$(prevEle).prev();
            var totalUsers = j$(".inpTransQty:visible").not(ele).length;
            var eachCount = Math.floor(orgRemainingQty/totalUsers);
           // alert ("totalUsers " +totalUsers + "eachCount" + eachCount + "orgRemainingQty" + orgRemainingQty);
           if(eachCount == 0)
           {
               if(fromUser == '{!CurUser.Id}')
                   alert('You have insufficient allocations for equal distribution.');
               else
                   alert('User has insufficient allocations for equal distribution.');
           }
           else
           {
            j$(".inpTransQty:hidden").not(ele).val(0).change();            
            j$(".inpTransQty:visible").not(ele).val(eachCount).change(); 
            remainingQty=orgRemainingQty-(eachCount * totalUsers);
          //  document.getElementById('Remaining').innerHTML = remainingQty;    
           }
        }
    }    

    function refreshRemainingQty()
    {
        var alreadyAllocatedQty= 0;
        j$('.inpTransQty').each(function(){
            alreadyAllocatedQty+= parseFloat(this.value);  // Or this.innerHTML, this.innerText
        });
        remainingQty = orgRemainingQty - alreadyAllocatedQty;
    }
</script>        
            <apex:pageBlockButtons location="top">
                <apex:commandButton value="Preview Allocations" rendered="{!allocList.size == 0}" onclick="if(document.getElementById('pg:frm1:pb:pbs:pbsItem2:fromuser-id').value == ''){ alert('Please select from user'); return false;}" action="{!previewAllocation}" status="actStatusId" rerender="pivot,pb"/>
                <apex:outputPanel rendered="{!allocList.size == 0}"><input id="clearAll" class="btn" type="button" value="Clear All"  onclick="clearAllInputs(); return false;"/>  
                <input class="btn" id="disEqually" type="button" value="Distribute Equally"  onclick="distributeEqually(); return false;"/></apex:outputPanel>                                
                <apex:commandButton value="Confirm" rendered="{!allocList.size > 0}" action="{!addAllocation}" status="actStatusId"  rerender="pivot,hierPb,pb"/>                
                <apex:commandButton value="Back" rendered="{!allocList.size > 0}" action="{!Back}" status="actStatusId" rerender="pivot,hierPb,pb"/>                             
            </apex:pageBlockButtons>
    <script>

  j$(function() {
    var selInd = true;
    var users = [ <apex:repeat value="{!userList}" var="usrLst"> 
                                  <apex:repeat value="{!usrLst}" var="usr">  
                                      <apex:outputText rendered="{!availableQtyMap[usr.userId] != 0}"> 
                                       {
                                            value: "{!usr.userId}",
                                            label: "{!usr.usrName} ({!availableQtyMap[usr.userId]})",
                                            desc: "{!usr.terrName}",
                                            availableQuantity: "{!availableQtyMap[usr.userId]}"
                                          },         
                                      </apex:outputText>             
                                   </apex:repeat>
                              </apex:repeat>
                              ];  

    j$( "#fromuser" ).autocomplete({
      minLength: 0,
      source: users,
      focus: function( event, ui ) {
        return false;
      },
      select: function( event, ui ) {
        selInd = true;
      //  alert('selInd' + selInd);
        j$( "#fromuser" ).val( ui.item.label );
        this.value = ui.item.label;      
        remainingQty =  ui.item.availableQuantity;
        orgRemainingQty = ui.item.availableQuantity; 
        document.getElementById("pg:frm1:pb:pbs:pbsItem2:fromuser-id").value = ui.item.value;        
        document.getElementById("pg:frm1:pb:pbs:pbsItem1:fromuser-nameHid").value = ui.item.label;        
        j$( "#fromuser-description" ).html( 'Terr:' + ui.item.desc );
        changedFlag = false;
        clearAllInputs();
        return false;
      },
      response: function(event, ui) {  
            selInd = false;   
           // alert('selInd' + selInd);  
            if (ui.content.length === 0) {
                var str = this.value;                
                document.getElementById("pg:frm1:pb:pbs:pbsItem2:fromuser-id").value = '';
                j$( "#fromuser" ).val('');
                j$( "#fromuser-description" ).html( 'User selected does not have allocations available.' );
            } else {
            }
        },
        change: function(event,ui){
       // alert('selInd' + selInd);

            if(!selInd) //this.value != j$( "#fromuser" ).attr('value'))
            {
                document.getElementById("pg:frm1:pb:pbs:pbsItem2:fromuser-id").value = '';
                j$( "#fromuser-description" ).html( 'Please select from User from Options available.' );
                remainingQty =  0;
                orgRemainingQty = 0; 
                clearAllInputs();
            }
        }

    })

    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return j$( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };

  });

  function enableDisableButtons(ele)
  {
      if(ele.value == '')
      {
          document.getElementById("disEqually").disabled = false;
         // document.getElementById("clearAll").disabled = false;
      }
      else
      {
          document.getElementById("disEqually").disabled = true;
        //  document.getElementById("clearAll").disabled = true;
      }      
  }

  </script>
 <apex:pageMessages />


        <apex:outputPanel rendered="{!allocList.size > 0}">
        <div class="row">
                       <div class="col-md-12">

                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    Preview Transfer
                                </h3>
                            </div>
                            <div class="panel-body">
                            <apex:pageBlockSection id="pbs1" columns="1">
                                <apex:pageBlockSectionItem >
                                <apex:outputLabel ></apex:outputLabel>                
                                <apex:outputText >From User: {!fromUserName}</apex:outputText>   
                                </apex:pageBlockSectionItem>
                            <!--div class="table-responsive" style="background-color: whitesmoke; height: 300px;"-->
                             <apex:dataTable styleClass="table table-hover table-bordered table-striped" rendered="{!allocList.size > 0}" value="{!allocList}" var="alloc" id="pbt">            
                                <apex:column headerValue="To User" value="{!alloc.toUserName}"/>
                                <apex:column headerValue="Quantity" value="{!alloc.Quantity}"/>                        
                            </apex:dataTable>
                            <!--/div--> 
                            </apex:pageBlockSection>
                             </div> 
                            <div class="panel-footer">
                                Please review and click on Confirm to initiate Allocation Transfer.
                            </div>                      
                        </div>                       


                      </div>
                      </div>  
      </apex:outputPanel>
        <apex:pageBlockSection id="pbs" columns="2" rendered="{!allocList.size == 0}">     
            <apex:pageBlockSectionItem id="pbsItem1">
                <apex:outputLabel >From User </apex:outputLabel>
                <apex:outputPanel >                                        
                    <input id="fromuser" value="{!fromUserName}" disabled="true" size="40"/>     
                    <apex:inputHidden value="{!fromUserName}" id="fromuser-nameHid"/>                
                </apex:outputPanel>
            </apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsItem2" >
                <apex:inputHidden value="{!fromUser}" id="fromuser-id"/> 

                   <pre style="font-family:sans-serif; border: 0px; " id="fromuser-description">{!userTerrDesc}</pre>
                    <!--apex:outputLabel >To User </apex:outputLabel>
                    <apex:outputPanel >                                        
                        <input id="touser"/>
                        <apex:inputHidden value="{!toUser}" id="touser-id"/> 
                        <p id="touser-description"></p>              
                    </apex:outputPanel>
                    -->
                </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>          


            <!--apex:pageBlockSectionItem id="pbsItem3">
                <apex:outputLabel style="color:Red">Effective Remaining Qty<br/>(After Transfer)</apex:outputLabel>
                <p style="color:Red" id = "Remaining"></p>
            </apex:pageBlockSectionItem>
            -->

</apex:pageBlockSection>
<script>
    if(document.readyState == 'complete')
    {
       j$('#fromuser').prop("disabled",false);
       j$('#input-filter').prop("disabled",false);   
       j$('#toUserSearch').filterTable({
            inputSelector: '#input-filter'
        });
    }
   // document.getElementById('Remaining').innerHTML = remainingQty;    
</script>  
<apex:inputHidden value="{!qty}" id="allocqty" />
<apex:inputHidden value="{!toUser}" id="touser-id"/> 
<apex:outputPanel id="toUsersSec" rendered="{!allocList.size == 0}">
    <div style="background-color: whitesmoke;" >
    <script>
    var prevValue;

    function inputOffFocus(ele,usrId)
    {

        var fromUser = document.getElementById('pg:frm1:pb:pbs:pbsItem2:fromuser-id').value;
        if(fromUser == '' && parseFloat(ele.value) > 0)
        {
            alert('Please select from User');
            j$(ele).val(prevValue).change();
            ele.nextSibling.innerHTML = '';
        }
        else if(usrId == fromUser && parseFloat(ele.value) > 0)
        {
            alert('Products cannot be transferred between the same users. Please update the To and Search fields for valid product allocations and transfers.');
            j$(ele).val(prevValue).change();
            ele.nextSibling.innerHTML = '';
        }
        else
        {
            if(ele.value == '') ele.value = 0;
            var checkRemaining = parseFloat(remainingQty) + parseFloat(prevValue) - parseFloat(ele.value);
            if(parseFloat(checkRemaining) < 0)
            {
                alert('You do not have sufficient allocations to complete this request.');
                j$(ele).val(prevValue).change();
                ele.focus();
            }
            else
            {
                remainingQty = parseInt(checkRemaining) ;
            //    document.getElementById('Remaining').innerHTML = remainingQty;
                ele.nextSibling.innerHTML = '';
            }        
        }
    }

    </script>
    <!-- Commenting this lines to implement sorting facility 
    <table class="table" style="width:98%;margin-bottom:0;">
            <thead>
                <tr class="headerRow">
                    <th class="col-md-3 headerRow" scope="col">User Name</th>
                    <th class="col-md-6 headerRow" scope="col">Territory</th>
                    <th class="col-md-1 headerRow" scope="col">Available</th>
                    <th class="col-md-2 headerRow" scope="col">Quantity</th>              
                </tr>
            </thead>
    </table> -->
    </div>
    <div style="height:350px; background-color: whitesmoke;"  class = "table-responsive" >
         <table style ="width: 1020px;">
            <thead style="display: block;">
                <tr class="headerRow">
                    <th style ="width: 250px;" class="col-md-3" scope="col"><apex:outputLabel >Search Table:</apex:outputLabel>
            <input id="input-filter" disabled="true"/> <!-- onkeyup="enableDisableButtons(this);" oninput="enableDisableButtons(this);"/--></th>
                    <th style ="width: 250px;" class="col-md-6" scope="col"></th>
                    <th style ="width: 250px;" class="col-md-1" scope="col"></th>
                    <th style ="width: 250px;" class="col-md-2" scope="col">
                    <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
                        onblur="document.getElementById('massAddEle').innerHTML = '';" onfocus="var frm1UserEle = j$('#' + document.getElementById('pg:frm1:pb:pbs:pbsItem2:fromuser-id').value).prev(); var totUsers = j$('.inpTransQty:visible').not(frm1UserEle).length;   var maxPossible = Math.floor(remainingQty/totUsers); document.getElementById('massAddEle').innerHTML = 'Remaining Qty: ' + remainingQty + '.<br/>Max Limit: ' + maxPossible ;"/>
                    <input class="btn" id="disSpecified" type="button" value="Add" onclick="distributeSpecified(j$(this).prev().val()); j$(this).prev().focus();"/>
                    <p id="massAddEle"></p></th>              
                </tr>
            </thead>
        </table>    
        <!-- table id="toUserSearch" class="table table-hover table-striped">    -->
        <table style ="width: 1120px;" id="toUserSearch" class="table tablesorter table-sm table-hover table-striped filterTable">
            <thead style="display: block;">
                <tr class="headerRow">
                    <th style ="width: 250px;" class="col-md-3 headerRow" scope="col">User Name</th>
                    <th style ="width: 250px;" class="col-md-6 headerRow" scope="col">Territory</th>
                    <th style ="width: 250px;" class="col-md-1 headerRow" scope="col">Available</th>
                    <th style ="width: 250px;" class="col-md-2 headerRow" scope="col">Quantity</th>              
                </tr>
            </thead>
            <tbody style="display: block; overflow: auto; height: 230px;">
                <apex:repeat value="{!userList}" var="usrLst"> 
                  <apex:repeat value="{!usrLst}" var="usr">   
                      <tr class="visible">
                      <td style ="width: 255px;" class="col-md-3" >{!usr.usrName}</td>
                      <td style ="width: 255px;" class="col-md-6">{!usr.terrName}</td>
                      <td style ="width: 255px;" class="col-md-1" >{!availableQtyMap[usr.userId]}</td>
                      <td style ="width: 255px;" class="col-md-2" ><apex:inputText styleClass="inpTransQty" style="background-color:{!IF(usr.allocCount == 0,'white','yellow')}" 
                      value="{!usr.allocCount}" onkeypress='return event.charCode >= 48 && event.charCode <= 57' 
                      onchange="if(this.value != 0) this.style.backgroundColor = 'yellow'; else this.style.backgroundColor = 'white';"
                      onfocus="prevValue =  parseFloat(this.value); this.nextSibling.innerHTML = 'Remaining Balance: ' + remainingQty;if(this.value==0) this.value='';"
                      onblur="inputOffFocus(this,'{!usr.userId}');"/><p Id="{!usr.UserId}"  style="color:Red"></p>
                      </td>
                      </tr>
                   </apex:repeat>
              </apex:repeat>            
            </tbody>
        </table>    
    </div>
    </apex:outputPanel>
    <!-- To sort table -->
    <script>                
            if(document.readyState == 'complete')
            {                
                var j$ = jQuery.noConflict();                
                j$('.tablesorter').tablesorter();  
            }    
            else
            {
                var j$ = jQuery.noConflict();
                j$(document).ready(function(){  
                    j$('.tablesorter').tablesorter();                                
                }); 
            }
    </script>        

        <script> refreshRemainingQty(); </script>
     </apex:pageBlock>
    </div>
    </apex:tab>
    </apex:tabPanel>
    </div>
                      </div>   
                      </div>    
                      </div>   
    </apex:form>
</apex:page>
2

The root cause of the issue is you are using two form tag on the page .

The action function Rerender does not work well with two forms on the page ,hence the solution would be to use only one form tag on the page

  • I have put it in one form and updated the code accordingly. Still it's not working. – Testing_SFDC Dec 12 '16 at 6:19
  • Can you please let me know my syntax. I have updated accordingly, still facing the issue – Testing_SFDC Dec 12 '16 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.