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>