3

I need to be able to map a Picklist field values in a visualforce page, for use with some JQUERY.

Without using VF/SF it would look something like this:

HTML:

<div id="AU" class="resultHide" style="display:none;">
Australia
</div>

<div id="US" class="resultHide" style="display:none;">
United States
</div>

<select id="picklist1">
    <option value="AU">AU</option>
    <option value="AU">UK</option>
    <option value="US">US</option>
</select>

JQUERY:

<script>
$(document).ready(function ($) {
    $('#picklist1').change(function() {
        $('.resultHide').hide(300);
        $('#' + $(this).val()).show(300);
    });
});
</script>

I have managed to get the field mapped in VF, however I don't know how to assign and retrieve the values of the picklist for use with JQUERY:

VF:

<apex:form id="picklistForm" >
<apex:repeat value="{!label}" var="lab">
    <div style="margin-bottom:10px;">
        <apex:inputHidden id="country" value="{!lab.Country__c}"/>
            <apex:selectList id="type1" value="{!lab.Country__c}" size="1">
                <apex:selectOptions value="{!CountryTypes}"/>
            </apex:selectList>
    </div>
</apex:repeat>
</apex:form>

APEX:

public list <SelectOption> getCountryTypes (){

    List <SelectOption> options = new List<SelectOption>();
    Schema.DescribeFieldResult fieldResult = Labels__c.Country__c.getDescribe();
    List <Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry f : ple){
            options.add(new SelectOption(f.getLabel(), f.getValue()));
        }       
    return options;
}

Any help would be appreciated...

Thanks

2

After some trawling of the interweb, and conversation with others, I came up with the following, which worked for me!

VF:

<apex:form id="picklistForm" >
<apex:repeat value="{!label}" var="lab">
    <div style="margin-bottom:10px;">
        <apex:selectList id="picklist2" value="{!lab.Country__c}" size="1" onchange="countryChanged(this)">
            <apex:selectOptions value="{!CountryTypes}"/>
        </apex:selectList>
    </div>
</apex:repeat>
</apex:form>

APEX:

public list <SelectOption> getCountryTypes (){

List <SelectOption> options = new List<SelectOption>();
Schema.DescribeFieldResult fieldResult = Labels__c.Country__c.getDescribe();
List <Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
    for( Schema.PicklistEntry f : ple){
        options.add(new SelectOption(f.getLabel(), f.getValue()));
    }       
return options;
}

JS:

<script>
function countryChanged(selectedCountry){
var country = selectedCountry.options[selectedCountry.selectedIndex].value;
alert(country);
}
</script>

This returns an alert with the correct value. I know the script doesn't include the show/hide, but thats easy now I have the Value.

2

You can access the Pick list component in JS something like this.

j$ = jQuery.noConflict();
var opt = j$('{!$Component.form.type1}') ; 
console.log(opt);

OR

j$ = jQuery.noConflict();
var opt = j$('{!$Component.type1}');
console.log(opt);

Here is best practices for accessing component ID in JS:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_best_practices_accessing_id.htm

here is example that shows diffrent ways to access id. It also shows example which will not work.

<apex:page >

    <style>
    .clicker { border: 1px solid #999; cursor: pointer;
        margin: .5em; padding: 1em; width: 10em; text-align: center; }
    </style>

    <apex:form id="theForm">
        <apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
            <apex:pageBlockSection id="theSection">
                <apex:pageBlockSectionItem id="theSectionItem">
                    All the alerts refer to this component.

                    <p>The full DOM ID resembles something like this:<br/>
                    j_id0:theForm:thePageBlock:theSection:theSectionItem</p>
                </apex:pageBlockSectionItem>

                <!-- Works because this outputPanel has a parent in common 
                     with "theSectionItem" component -->
                <apex:outputPanel layout="block" styleClass="clicker"
                    onclick="alert('{!$Component.theSectionItem}');">
                    First click here
                </apex:outputPanel>
            </apex:pageBlockSection>

            <apex:pageBlockButtons id="theButtons" location="bottom">
                <!-- Works because this outputPanel has a grandparent ("theSection")
                     in common with "theSectionItem" -->
                <apex:outputPanel layout="block" styleClass="clicker"
                    onclick="alert('{!$Component.theSection.theSectionItem}');">
                    Second click here
                </apex:outputPanel>

                <!-- Works because this outputPanel has a distant ancestor ("theForm")
                     in common with "theSectionItem" -->
                <apex:outputPanel layout="block" styleClass="clicker"
                    onclick="alert('
                    {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
                    Third click here
                </apex:outputPanel>
            </apex:pageBlockButtons>

        </apex:pageBlock>

        <!-- Works because this outputPanel is a sibling to "thePageBlock",
             and specifies the complete ID path from that sibling -->
        <apex:outputPanel layout="block" styleClass="clicker"
            onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
            Fourth click here
        </apex:outputPanel>

        <hr/>

        <!-- Won't work because this outputPanel doesn't provide a path 
             that includes a sibling or common ancestor -->
        <apex:outputPanel layout="block" styleClass="clicker"
            onclick="alert('{!$Component.theSection.theSectionItem}');">
            This won't work
        </apex:outputPanel>

        <!-- Won't work because this outputPanel doesn't provide a path 
             that includes a sibling or common ancestor -->
        <apex:outputPanel layout="block" styleClass="clicker"
            onclick="alert('{!$Component.theSectionItem}');">
            Won't work either
        </apex:outputPanel>

    </apex:form>
</apex:page>
  • Hi, thanks for your response. Unfortunately the JS you have pasted doesn't work combined with the example I wrote. It also doesn't work with the copied Salesforce page example. – TheMikeyBoosh Jun 22 '16 at 10:48
  • Check my updated answer. – AtulRajguru9 Jun 22 '16 at 11:25
  • Hi Atul, unfortunately that doesn't work in my example either. It looks like you are trying to reference the actual field, and you arent looking for the fields values (picklist val). Also, the component example makes no reference to inout fields. Regardless, I cobbled together the solution, please see my answer below. – TheMikeyBoosh Jun 22 '16 at 23:32

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.