1

I want to hide lines on the VF page and I'm running into issues with detecting the checkbox value. The steps to get to this point are:

  • select student type of Freshman. This will cause the high school information to show.
  • If the homeschooled checkbox is selected, I want the other highschool lines to disappear.

I modified code based on the answer provided and simplified it to focus on the main issue (not detecting the checkbox). I am still having an issue where the 'Country' is showing even when the box is checked. Let me know if you have additional suggestions.

new vfp code:

<apex:page Controller="RFIForm" showHeader="false" standardStylesheets="FALSE">
<apex:includeScript value="{!$Resource.jQuery}"/>
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<script>

$(document).ready(function() {

HSReRender();
});

function HSReRender(){
var studentType = $("[id$=studentType]").val();

if (studentType == "Freshman"){
    $(".highSchoolPanelH").show();
} else {
    $(".highSchoolPanelH").hide();
    }
}
</script>
<apex:pageMessages ></apex:pageMessages>
<apex:form Id="form">
<h1 id="page-title">Request for Information </h1>
<div style="width:100%">
    <p>
       <span class="contentText">Please enter your information in the fields below. When completed click on the <b>Submit</b> button at the bottom of page. Please allow 3 to 5 business days for processing your request for information.</span>
    </p>
    <p>
       <span class="contentText"><strong>* Indicates a required field.</strong></span>
    </p>
</div>
<table border="0" cellspacing="3" width="100%">
    <tbody>
        <tr>
             <th colspan="2">Name and Personal Data</th>
        </tr> 
        <tr>
            <td width="37%"><apex:outputText styleclass="req" value="*Type of Student:"/></td>
            <td width="63%">
                <apex:selectList id="studentType" value="{!studentType}" multiselect="false" size="1" styleClass="inputRequired" onchange="HSReRender();">
                    <apex:selectOptions value="{!studentTypeOptions}"/>
                    <apex:actionSupport event="onchange" rerender="highSchoolPanel"/> 
                </apex:selectList>
            </td>
        </tr>
    </tbody>
</table>
<table border="0" cellspacing="3" width="100%">
    <tbody>
        <tr class="highSchoolPanelH">
            <th colspan="2" class="highSchoolPanelH">High School Information</th>
        </tr>
        <tr class="highSchoolPanelH">
            <td width="37%" class="highSchoolPanelH">Home Schooled</td>
            <td width="63%" class="highSchoolPanelH">
                <apex:inputField value="{!interest.Home_Schooled__c}">
                <apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
                </apex:inputField>
            </td>
        </tr>

        </tbody> 
    </table>
<table border="0" cellspacing="3" width="100%" id="highSchoolPanel" >
    <tbody>
    <tr class="highSchoolPanelH">
          <td width="37%" class="highSchoolPanelH">
              <apex:outputText rendered="{!!interest.Home_Schooled__c}">*High School Country
              </apex:outputText>
          </td>
          <td width="63%" class="highSchoolPanelH">
              <apex:selectList id="highSchoolCountry" value="{!hscountry}" multiselect="False" size="1" styleClass="inputRequired" rendered="{!!interest.Home_Schooled__c}">
                 <apex:selectOptions value="{!CountryOptions}"/>
                 <apex:actionSupport event="onchange" action="{!getHsStateRequired}"/>
              </apex:selectList>
          </td>
        </tr>
        </tbody>
    </table>
</apex:form>
</apex:define>
</apex:composition>
</apex:page>
  • tbh, i dont see much difference between this post and unable to hide fields on vf page -closed-. you have just added a bunch of alerts and are not providing any debug info, "I added alert messages to see what it is doing and it is getting stuck," is not very helpful for troubleshooting, and having to go through all your code is not very motivating either. – glls Oct 19 '17 at 13:29
  • glls - I am getting stuck because the code I have is not detecting a change to the checkbox (homeschooled). I stated that in the message, but guess I didn't highlight it enough. I thought providing all of the code was what I was suppose to do. – user2569499 Oct 19 '17 at 13:35
2

rendered

The rendered attribute only works on Visualforce elements, not plain HTML elements. You need to change those bits to an apex:outputText:

<td width="37%" class="hsPanelH" 
    rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
    High School City:
</td>

Would instead be:

<apex:outputText rendered="{!studentType=='Freshman' && !interest.Home_Schooled__c}">
    <td width="37%" class="hsPanelH">
        High School City:
    </td>
</apex:outputText>

apex:actionSupport

<apex:actionsupport event="onchange" rerender="highSchoolOtherLabel, highSchoolOtherField, highSchoolOtherLabel2, highSchoolOtherField2, highSchoolOtherLabel3, highSchoolOtherField3" />

A reRender attribute calls the server to determine what the new page state should look like. You're trying to use jQuery, so this is actually counterproductive; your page's state would revert every time this is called.

apex:actionRegion

This limits the data submitted to the server, which is probably causing your controller to do weird things (such as leaving the box always checked). You should remove those.

Mixing HTML and Visualforce Event Handlers

 ... onchange="HSReRender()">
 ... <apex:actionSupport event="onchange" reRender="..." ...

I expect this to not work. If it happens to work, I still wouldn't trust it to do so. Instead, set up an apex:actionFunction and call that instead:

<apex:actionFunction name="reRender1" reRender="..." />
... onchange="HSReRender(); reRender1();"> ...

This removes the need for the apex:actionSupport.


As an aside, it's a lot easier if you...

console.log vs. alert

Alert is used to notify the user of something. Use console.log to put logs to the Developer Console, which is easier to read and doesn't halt execution.


You may have some other issues as well, but I only addressed the top issues here. Fixing all of the above may or may not actually fix your issue, however. Mixing JavaScript and Visualforce elements is a risky business. Consider using pure jQuery or pure Visualforce. This will make your code perform more consistently.

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.