0

I am trying to search anything about automatic rendering of an empty table row for each selected javascript checkbox using jquery and visualforce.

The aim is for every selected row from CustomObj__c, there must be an empty CustomObj2__c table row displayed.

I am thinking in switching to using jquery for the reason that actionsupport didn't work successfully :( Besides, samples from the internet focus more on the object field with checkbox datatype, instead of javascript-made checkbox.

Here's vf page:

<apex:page standardController="CustomObj__c">

    <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID) {
            var inputCheckbox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckbox.length; i++) {
                if(inputCheckbox[i].id.indexOf(receivedInputID)!=-1) {
                    inputCheckbox[i].checked = obj.checked;
                }
            }
        }
    </script>  

    <apex:pageBlock id="section1" rendered="{!Section1}">
        <apex:pageBlockTable value="{!cList}" var="c">
            <apex:column>
            <apex:facet name="header">
                <apex:inputCheckbox onclick="selectAllCheckboxes(this,'chk')"/>
            </apex:facet>   
            <apex:inputCheckbox value="{!c.IsSelected}" id="chk">
                <apex:actionSupport event="onclick" reRender="section2"/>
            </apex:inputCheckbox> 
            </apex:column> 
            <apex:column>
                <apex:inputField value="{!c.Mobile__c}"/>
            </apex:column>   

        </apex:pageBlockTable>    
    </apex:pageBlock>  

    <apex:pageBlock id="section2" rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>

</apex:page>

*Note: cList2 is an empty table row for another custom object named CustomObj2__c.

As per the jquery part, I'm still not sure on how to do this with visualforce page.

Controller:

public class SampleController {
    private ApexPages.StandardController controller {get;set;}
    public List<CustomObj__c> cList {get;set;}
    public List<CustomObj2__c> cList2 {get;set;}
    public Boolean Section1 {get;set;} 
    public Boolean Section2 {get;set;}

    public SampleController(ApexPages.StandardController con) {
        controller = con;
        Section1 = true;
    }

    public void controllermethod() {
        List<CustomObj2__c> cList2 = new List<CustomObj2__c>();
        cList2.add(new CustomObj2__c()); 
    }

    //other methods....
} 

VF Page

<apex:page standardController="CustomObj__c" extensions="SampleController">

    <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID) {
            var inputCheckbox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckbox.length; i++) {
                if(inputCheckbox[i].id.indexOf(receivedInputID)!=-1) {
                    inputCheckbox[i].checked = obj.checked;
                }
            }
        }
    </script>  

    <apex:pageBlock id="section1" rendered="{!Section1}">
        <apex:pageBlockTable value="{!cList}" var="c">
            <apex:column>
            <apex:facet name="header">
                <apex:inputCheckbox onclick="selectAllCheckboxes(this,'chk')"/>
            </apex:facet>   
            <apex:inputCheckbox value="{!c.IsSelected}" id="chk">
                <apex:actionSupport event="onclick" reRender="section2" action={!controllermethod}/>
            </apex:inputCheckbox> 
            </apex:column> 
            <apex:column>
                <apex:inputField value="{!c.Mobile__c}"/>
            </apex:column>   

        </apex:pageBlockTable>    
    </apex:pageBlock>  

    <apex:outputPanel id="section2">
    <apex:pageBlock rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>
    </apex:outputPanel>

</apex:page>
0

You can do this easily When you select the checkbox

<apex:actionSupport event="onclick" reRender="section2" action="{!controllermethod}" />

call controller method and in your controller

public void controllermethod()
{
   cList2.add(new CustomObj2__c())
}

Also put this code in apex:outputpanel and rerender that section

<apex:outputpanel id="section2" >
      <apex:pageBlock rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>
</apex:outputpanel>

PS: If some one select the checkbox and then deselect and then again select it will add blank line every time you need to handle that case as well.

Update your code as

public SampleController(ApexPages.StandardController con) {
        controller = con;
        Section1 = true;
        cList2 = new List<CustomObj2__c>();
    }

    public void controllermethod() {

        cList2.add(new CustomObj2__c()); 
    }
  • Hi, thanks for your immediate response. By the way, I've done what you've suggested above, but still, empty table row for CustomObj2__c doesn't display. – eagerlearner Oct 10 '16 at 17:08
  • @eagerlearner make sure you follow all steps and paste your controller code too. – Tushar Sharma Oct 10 '16 at 17:17
  • I've added the controller and the modified vf page based from your suggestion. Those are on the most bottom part of my original post, thanks. – eagerlearner Oct 10 '16 at 17:41
  • @eagerlearner remove this line List<CustomObj2__c> cList2 = new List<CustomObj2__c>(); from your method. check my updated code. – Tushar Sharma Oct 11 '16 at 6:01
  • I removed this part List<CustomObj2__c> cList2 = new List<CustomObj2__c>() from the controllermethod() and followed your updated code. But still, section2 does not appear on checkbox click. Does it have anything to do with the fact that the checkbox is generated via javascript? – eagerlearner Oct 11 '16 at 6:43

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.