+ Start a Discussion
AnjaneyluAnjaneylu 

Jquery not showing alert statement inside the dependent picklist value

Hi all,

I am trying to implement jquery to show and hide fields. But when i used alert statement it is working for 1st picklist value. But for second picklist value it is not showing. Can you help me out here. Check the code once !!
Thanks in Advance.
<apex:page standardcontroller="Account" extensions="QuickActionToCreateIBATCaseExtension" showHeader="false" doctype="html-5.0"> 

    <style type="text/css">
        tr {  display: table-row; vertical-align: inherit; border-color: inherit; }
        div { font-weight: bold;  }
        .lableCol { padding-top: 3px; padding-bottom: 3px; width: 50%; }
        .row { content: ""; display: table; clear: both; }
        .column { float: left;  width: 50%;  padding: 10px; height: 300px; }
        table {border:0; cellpadding:0; cellspacing:0;}
    </style>
     
    <div> 
        <apex:form id="FormID">
            <apex:actionFunction action="{!createCase}" name="createCase" rerender="FormID,out"  oncomplete="refreshFeed();"/> 
            <apex:outputPanel id="out">
                <table >
                    <tbody>
                        <tr>
                            <td class = "labelCol"  style="width: 50%;">
                                <label>Type: &nbsp; &nbsp;</label>
                            </td>
                            <td>  <apex:inputField value="{!theCase.type}" id="CaseType"> </apex:inputField>  </td>
                        </tr>
                        <tr>
                            <td class = "labelCol"  style="width: 50%;">
                                <label>Sub Type: &nbsp; &nbsp;</label>
                            </td>
                            <td>  <apex:inputField value="{!theCase.Sub_Type__c}" id="CaseSubType"> </apex:inputField>  </td>
                        </tr>
                        
                        <tr id="DescrID">
                            <td class = "labelCol">
                                <label>Description : &nbsp; &nbsp;</label>
                            </td>
                            <td> <apex:inputField value="{!theCase.Description}"> </apex:inputField>  </td>
                        </tr>
                       <tr id="AssetID">
                            <td class = "labelCol">
                                <label>Asset : &nbsp; &nbsp;</label>
                            </td>
                            <td> <apex:inputField value="{!theCase.assetId}"> </apex:inputField>  </td>
                        </tr>  
                        <tr id="DestnSiteID">
                            <td class = "labelCol">
                                <label>Destination Site : &nbsp; &nbsp;</label>
                            </td>
                            <td> <apex:inputField value="{!theCase.Destination_Site__c}"> </apex:inputField>  </td>
                        </tr>
                       <!-- <tr>
                            <td class = "labelCol">
                                <label>Asset Move Type : &nbsp; &nbsp;</label>
                            </td>
                            <td> <apex:inputField value="{!theCase.Destination_Site__c}"> </apex:inputField>  </td>
                        </tr> -->
                        <tr>
                            <td align= "Center">
                                <button type="button" onclick="createCase();" 
                                        style="position:fixed;padding:5px 10px; font-size:13px; font-weight:bold; line-height:18px;" id="addcasebutton">Create Case</button> 
                            </td>
                        </tr>
                    </tbody>
                </table>
            </apex:outputPanel>
        </apex:form>
    </div> 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script type="text/javascript"> 
        
        $( document ).ready(function() {
         // On Page load trying to hide all these by IDs.
         $("[id$=DescrID],[id$=AssetID],[id$=DestnSiteID]").hide();
      
         $("[id$=CaseType]").change(function(){
            var CaseType1 = $(this).val();
            
             alert('CaseSubType1 '+CaseType1);// This is showing alert when i changed the Type
           
         });
         
         $("[id$=CaseSubType]").change(function(){
            var CaseSubType1 = $(this).val();
            
             alert('CaseSubType1 '+CaseSubType1);// This is NOT showing alert when i changed the SubType
           
         });
         
     });
    </script> 
    
   <script type='text/javascript' src='/canvas/sdk/js/publisher.js'>
    <script>
    function refreshFeed() { 
        Sfdc.canvas.publisher.publish({name : 'publisher.refresh', payload : {feed:true}}); 
        
    }
    </script>  
    
</apex:page>