Hide/Unhide picklist using jquery on VFP [closed]

Question

For some reason, the init in the javascript hides everything BUT the joint billing partner code

VFP:

       <apex:pageBlockSectionItem id="PPJPN">
                <apex:outputLabel value="Joint Billing Partner Name" id="Property__Joint___Name_lbl" for="Property__Joint___Name"><font size="3px" color="red">*</font></apex:outputLabel>
               <apex:inputField value="{!DealerProperty__c.jointBillingPartnerName__c}"    id="Property__Joint___Name"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="PPJPC">
                <apex:outputLabel value="Joint Billing Partner Code" id="Property__Joint___Code_lbl" for="Property__Joint___Code"><font size="3px" color="red">*</font></apex:outputLabel>
                <apex:inputField value="{!DealerProperty__c.jointBillingPartnerCode__c}" id="Property__Joint___Code"/> 
            </apex:pageBlockSectionItem>

Javascript:

     if(propModelVal.includes("JOINT")){
        $("[id$=Property__Joint___Name]").show();
        $("[id$=Property__Joint___Code]").show();
        $("[id$=Property__Joint___Name_lbl]").show();
        $("[id$=Property__Joint___Code_lbl]").show();
    }else{
        $("[id$=Property__Joint___Name]").hide();
        $("[id$=Property__Joint___Code]").hide();
        $("[id$=Property__Joint___Name_lbl]").hide();
        $("[id$=Property__Joint___Code_lbl]").hide();
    }

edit: it is a dependant picklist if that makes any difference

edit2: I looked at the source code and the id on the page is PP:PF:PM:PI:PPJPC:Property__Joint___Code which means the jquery selector should work.

there are actually 2 ids, one for the input and one for the selector, would that make a difference?

Answer 1

$("[id$=Property__Joint___Code]")

this is an "ends with" selector being used on the id attribute of the rendered HTML element

<apex:inputField value="{!DealerProperty__c.jointBillingPartnerCode__c}" 
    id="Property__Joint___Code"/> 

This VF tag bound to the custom field on your object is likely producing an id on the HTML element which does not end with Property__Joint___Code and so because no elements were found matching that selector, nothing was hidden.

If you inspect the source of that page you can see what the id value is and adjust your jQuery selector appropriately or you can use the utility provided by Salesforce for this, which is the global $Component reference.

Your jQuery syntax for the selector might look like this instead in your source code:

$('[id="{!$Component.Property__Joint___Code}"]');

which would then be rendered into the page as something like this with the dynamically generated id:

$('[id="yourPageId:yourPageBlockId:yourPageBlockSectionId:PPJPC:Property__Joint___Code"]')

Related: https://salesforce.stackexchange.com/a/126076/660