+ Start a Discussion
Markey1Markey1 

Visualforce Checkbox Rerender via Ajax - Whats wrong with my code?

I have a checkbox that when checked, the section which contains a save button should appear using ajax render/rerender. What is wrong with my code? Also, I'm using DIVs to control look and feel... is there a better way to do this using panels etc?

 

Class:

public String test2 {get; set;}

 

Page:

      <div id = "body_row">
        <apex:pageblock id="test">
          <apex:pageBlockSection>
            <apex:pageBlockSectionItem >             
              <apex:inputCheckbox value="{!test2}" />
               <apex:actionsupport event="onclick" rerender="termsandconditions" />
            </apex:pageBlockSectionItem>
          </apex:pageBlockSection>
        </apex:pageblock>
      </div>
      
      <div id = "body_row">
        <apex:pageblock id="termsandconditions">
          <apex:messages />
          <apex:pageblockButtons location="bottom" rendered="{IF({!test2} == true,true,false)}">
            <apex:commandButton action="{!Save}" value="Submit Enrollment" />
          </apex:pageblockButtons>
        </apex:pageblock>
      </div>

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

In this case you are trying to attach an action to the inputcheckbox component, so the actionsupport needs to be a child of that.

 

E.g.

 

 

 <apex:inputCheckbox value="{!test2}">
              <apex:actionsupport event="onchange" rerender="termsandconditions" />     
 </apex:inputCheckbox>

 

 

All Answers

jwetzlerjwetzler

You've got a few things wrong.  First of all, since you've got a checkbox, you might as well make "test2" a boolean instead of a string.  That way your rendered attribute would be simply rendered="{!test2}" (for the record, the syntax you had wasn't even correct, it would be more like "{!IF(test2 == 'true', true, false)}")

 

And then additionally, your actionSupport component needs to be the child component of what you're trying to attach an action to.  So it should be a child component of your inputCheckbox.  Try that out and let me know if it works.

Pradeep_NavatarPradeep_Navatar

You can use javascript to perform this task. See below a sample code :

 

          <apex:page controller="cls_rendercheckbox" id="PageId">

            <apex:form>

                                                                <apex:pageblock >

                                                                  <apex:pageBlockSection>

                                                                                <apex:pageBlockSectionItem >            

                                                                                  <apex:inputCheckbox value="{!test2}" onclick="showbutton()"/>

 

                                                                                </apex:pageBlockSectionItem>

                                                                  </apex:pageBlockSection>

                                                                </apex:pageblock>

                                                                <apex:pageblock>

                                                                  <apex:messages />

                                                                  <apex:pageBlockButtons location="bottom">

                                                                                <apex:commandButton action="{!Save}" value="Submit Enrollment"  id="showit" style="display:none" />

                                                                                </apex:pageBlockButtons>

                                                                </apex:pageblock>

            </apex:form>

                                                <script>

                                                  function showbutton()

                                                  {

                                                                alert('hi');

                                                                document.getElementById('{!$Component.PageId:formid:pageblockid:idpage:showit}').style.display = 'block';

                                                  }

                                                </script>

        </apex:page>

 

Hope this helps.

bob_buzzardbob_buzzard

I think this line may be confusing things:

 

 

<apex:pageblockButtons location="bottom" rendered="{IF({!test2} == true,true,false)}">

 

test2 doesn't need to be inside its own merge decorators, rather the whole IF statement should be

 

Try:

 

 

<apex:pageblockButtons location="bottom" rendered="{!IF(test2 == true,true,false)}">

 

 

I would also expect the following to work:

 

 

<apex:pageblockButtons location="bottom" rendered="{!test2}">

 

but I've found that sometimes I have to use the IF syntax even though its not adding anything.

 

 

 

 

Markey1Markey1

Thank you for getting me started. I'm still a noob... can you please provide more guidance on how the "actionSupport component needs to be a child componenet of what you're trying to attach an action to". My code:

 

Class:

public Boolean test2 {get; set;}

Page:

      <div id = "body_row">
        <apex:pageblock id="test">
          <apex:pageBlockSection >
            <apex:pageBlockSectionItem >             
              <apex:inputCheckbox value="{!test2}" />
              <apex:actionsupport event="onclick" rerender="termsandconditions" />                          
            </apex:pageBlockSectionItem>            
          </apex:pageBlockSection>
        </apex:pageblock>
      </div>
      
      <div id = "body_row">
        <apex:pageblock id="termsandconditions">       
          <apex:messages />
          <apex:pageblockButtons location="bottom" rendered="{!IF(test2 == true,true,false)}">
            <apex:commandButton action="{!Save}" value="Submit Enrollment" />                        
          </apex:pageblockButtons>
        </apex:pageblock>
      </div>

 

 

bob_buzzardbob_buzzard

In this case you are trying to attach an action to the inputcheckbox component, so the actionsupport needs to be a child of that.

 

E.g.

 

 

 <apex:inputCheckbox value="{!test2}">
              <apex:actionsupport event="onchange" rerender="termsandconditions" />     
 </apex:inputCheckbox>

 

 

This was selected as the best answer
Markey1Markey1

Bob Buzzard, you are brilliant! This was the missing link. Thank you to both of you for helping me get this sorted out!