I'm trying to update a jQuery mobile app that uses visual force to do a couple different things, one of which is to create multiple new Tasks based on checkboxes for picklist values. Each value represents a Task Type field value.

On top of this requirement, I need to toggle visibility of the Description field when a checkbox is checked. To maintain consistency with existing code, I need to use visualforce to create the new page. I'd like to use "on-click" to toggle visibility of the Description field, but without an Id, am not certain how to do that when the table is generated with visualforce vs html.

Here's how I'm thinking of approaching this in general:


public with sharing class multiselect {

    //property to support the chosen select list    
    public String[] boxid { get; set; }

    // all options 
    public SelectOption[] valuesList { get; set; }

    // chosen options
    public List<SelectOption> chosenItems {get;}

    // Descriptions for chosen items
    public string[] Descriptions {get; set;}

    //property to back the chosen select list
    public String[] chosen {get;}

    // not certain if this approach is even necessary or will even work 
    // but I have no Id to associate these with

    public multiselect() {

    getValues(SiteTaskSettings__c .Field_Service_PickEntries__c);
    list<string>valuesList = new list<string>();
    List<SelectOptions>valueList = new List<SelectOptions>();

    multiselect MS = new multiselect[string, string, string];
    list<string>Descriptions = new string[0]
    list<string> boxid = new string[0];
    for(string v:valuesList){
        integer i = 0;
        boxid[i] = '00'+ string.valueOf(i);
        SelectOption[i] = v;
        string Description[i] = 'Description';

        multiselect MS = (boxid[i], SelectOption[i], Description[i]);


    return MS;


    // getter for the selected ids
    public StringContainer getSelected()

        // add method to get values for selected boxes (including descriptions)

        // pass list of values to a method that creates list of values to a method to create tasks // for related account



<apex:page standardController="Account" extensions="MultiTaskCreate" showHeader="false" sidebar="false" standardStylesheets="true" >

<apex:stylesheet value="{!URLFOR($Resource.assets, 'css/langenfeld.css')}"/>

<style type="text/css">
    a:link {text-decoration:none;}

        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 
        <title>Langenfeld: Log a Call</title> 

        <apex:stylesheet value="{!URLFOR($Resource.jqm121, 'jquery.mobile-1.2.1/jquery.mobile-1.2.1.min.css')}"/>

        <apex:includeScript value="{!URLFOR($Resource.jq171, 'jquery171/jquery-1.7.1.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.jqm121, 'jquery.mobile-1.2.1/jquery.mobile-1.2.1.min.js')}"/>        

        <apex:stylesheet value="{!URLFOR($Resource.jqm121, 'jquery.mobile-1.2.1/demos/docs/_assets/css/jqm-docs.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.jqm121, 'jquery.mobile-1.2.1/demos/docs/_assets/js/jqm-docs.js')}"/>



<apex:form id="theForm">

<!-- Start of third page: #three -->
<div data-role="page" id="three">

    <!-- header -->  
    <div data-role="header" data-theme="b">
        <h1><apex:outputText value="Log a Call" /></h1>
    <!-- /header -->

    <!-- Display Page Messaging -->
   <apex:pageMessages id="theMessages" /> 

    <!-- page content -->
    <div data-role="content" >  

    <apex:pageBlock title="Subject: Store Visit" >
        <apex:pageBlockSection showHeader="false" columns="2" id="custmrclient" >
            // Two accounts will be on the Task that are related by the RecordType depending on the // checkbox that is chosen
            // This represents an account of one "Type"
            <apex:outputLabel value="Client"/><apex:inputfield id="client" value="{!currentclient.name}" />
            //This represents a different account of another "Type". 
            <apex:outputLabel value="Customer"/><apex:inputfield id="customer" value="{!Customer.name}" />
        </apex:pageBlockSection >

        <apex:pageBlockSection showHeader="false" columns="2" id="chckbxs" >
            <!-- Checkbox -->
            <apex:pageBlockTable id="data" value="{!MS}" var="t">
                <apex:column value="{!t.options}" >
                // I'm not certain if using JS or jQ is the way to go here for the onClick to change visiblity of Description
                <apex:selectCheckboxes value="{!options}" layout="pageDirection" style="margin-left: 100px;" id="chbxlst" required="true" onclick ="$checkbox.change">
                    <apex:outputLabel for="option" value="Options"/><apex:selectOptions id="option" value="{!Options}" />
                    </apex:selectCheckboxes ></apex:column>
                <apex:column value="{!t.Description}" >
                    <apex:outputLabel for="descr" value="Description" id="thedescr0" styleclass="hidden" />
                    <apex:inputTextarea id="thedescr1" value="{!Description}" styleclass="hidden" />
                    <script> var thedescr0 = document.getElementById("{!$Component.thedescr0}" var thedescr0 = document.getElementById("{!$Component.thedescr1}") </script>
        <a href="index.html" data-role="button" data-inline="true" data-theme="b" onclick="$.mobile.showPageLoadingMsg(); save();">Save</a>

<!-- /page three -->



I know I can also approach this with jQuery using relative selectors, but have never done that using Visualforce, instead only with standard html tables, so am not certain exactly how that would work. It seems there's probably a way to turn the visibility on and off through the controller for each Description also, but again, it would seem I'd need to have them in a class to do that so I can associate them with the boxId.

Any guidance on how best to approach this entire coding would be appreciated. Standard visualforce is not my strong suit as I primarily write PDF generators.

  • 1
    Not sure if this will help or not, but what I have done before is add the ID of the record to a class on the element i.e for a description field. styleClass="{!var.id}_desc" then on the checkbox check I pass the ID to the method that controls visibility and use $('.' + that + '_desc').toggle(); (for example). Basically using the styleClass as a replacement for the ID so I could do dynamic values – Eric Nov 20 '15 at 19:10
  • @Eric. I had thought something along those lines would work, but since I don't have a "true" Id, that's the issue for me. That's why I was thinking of creating the "psuedoclass" and using the boxId to control it. But, that's not a true Id I can pass. Have thought of using jQ's .next() selector to get the cell that I need to toggle. Even if mobile wraps it, I'd think I'd be okay. – crmprogdev Nov 20 '15 at 20:13
  • If you generated a unique value for each record in cust then you could use that as the styleclass in the description styleClass="{!t.uniqueID}" of course I do not know how your cust data looks – Eric Nov 20 '15 at 20:16
  • @Eric. My bad, the cust doesn't belong in the lower pageblock section & is left over code. That should be something like MS from the controller if I generate a custom class. Will edit the question to reflect that. Would then use the boxId as the iterator. This seens so much more difficult than it needs to be! – crmprogdev Nov 20 '15 at 20:21

Your Answer

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

Browse other questions tagged or ask your own question.