I am working on dependent picklist. I have a parent object on select Parent record in the first picklist I need to get all related child record in the 2nd picklist. This is working fine. But when I use other field along with this inside the tag this picklist is not working in on change. I am confused why it is not working as expected. Please find my code below and help me!
<apex:page standardController="Main_Task_Configuration__c" extensions="Task_ConfigurationExtension"
sidebar="false" title="Main Task Configuration Page">
<head>
<apex:slds />
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<script>
function removeRow(i) {
var r = confirm("Are you sure to delete?");
if (r == true) {
removeRow1(i);
}
}
</script>
<apex:form id="frm">
<apex:pageMessages />
<div>
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium " style="text-align:center;font-weight: 600;">New Main Task Configuration</legend>
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium" style="background-color:lightblue !important;line-height: 0.25;">Main Task Configuration Edit</legend>
<table class="slds-table slds-table_bordered slds-table_cell-buffer" Style='margin-top:5px;' id="mainTaskConfig" rendered="{!isNew}" collapsible="false" width="100%">
<tr>
<td class="slds-truncate" style="width:8%;padding-left: 120px;">Product</td>
<td style="width:8%">
<div class="slds-select_container">
<apex:selectList value="{!selectProdId}" multiselect="false" styleClass="slds-select slds-form-element__control"
size="1">
<apex:selectOptions value="{!RecordList}"/>
<apex:actionSupport event="onchange" reRender="a"/>
</apex:selectList>
</div>
</td>
<td class="slds-truncate" style="width:8%;padding-left: 120px;">Task Type</td>
<td>
<apex:selectList size="1" value="{!selectTaskTypeId}" id="a" multiselect="false" styleClass="slds-select slds-form-element__control">
<apex:selectOptions value="{!TaskTypeList}"/>
</apex:selectList>
</td>
</tr>
</table>
<apex:commandButton value="Render Sub Tasks" action="{!renderSubTasks}" rendered="{!isNew}"
reRender="frm" status="status" styleClass="slds-button slds-button_brand"
style="margin-left:0px"/>
</div>
</apex:form>
</apex:page>
[![enter image description here][1]][1]
Till above code it is working fine but as soon as I am adding a inputfield it stopped working.
<apex:page standardController="Main_Task_Configuration__c" extensions="Task_ConfigurationExtension"
sidebar="false" title="Main Task Configuration Page">
<head>
<apex:slds />
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<script>
function removeRow(i) {
var r = confirm("Are you sure to delete?");
if (r == true) {
removeRow1(i);
}
}
</script>
<apex:form id="frm">
<apex:pageMessages />
<div>
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium " style="text-align:center;font-weight: 600;">New Main Task Configuration</legend>
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium" style="background-color:lightblue !important;line-height: 0.25;">Main Task Configuration Edit</legend>
<table class="slds-table slds-table_bordered slds-table_cell-buffer" Style='margin-top:5px;' id="mainTaskConfig" rendered="{!isNew}" collapsible="false" width="100%">
<tr>
<td class="slds-truncate" style="width:8%;padding-left: 120px;">Product</td>
<td style="width:8%">
<div class="slds-select_container">
<apex:selectList value="{!selectProdId}" multiselect="false" styleClass="slds-select slds-form-element__control"
size="1">
<apex:selectOptions value="{!RecordList}"/>
<apex:actionSupport event="onchange" reRender="a"/>
</apex:selectList>
</div>
</td>
<td class="slds-truncate" style="width:8%;padding-left: 120px;">Task Type</td>
<td>
<apex:selectList size="1" value="{!selectTaskTypeId}" id="a" multiselect="false" styleClass="slds-select slds-form-element__control">
<apex:selectOptions value="{!TaskTypeList}"/>
</apex:selectList>
</td>
</tr>
</table>
<apex:commandButton value="Render Sub Tasks" action="{!renderSubTasks}" rendered="{!isNew}"
reRender="frm" status="status" styleClass="slds-button slds-button_brand"
style="margin-left:0px"/>
</div>
**<apex:inputField value="{!mainTaskConfig .Task_Name1__c}" required="true" styleClass="slds-input" />**
</apex:form>
</apex:page>
I have tried inside the outside the , nothing worked.
[![enter image description here][2]][2]
/* Product List */
public List<SelectOption> getRecordList(){
system.debug('***---'+selectProdId);
prodList=[Select id, name from Product__c];
system.debug('product'+prodList);
List < SelectOption > options = new List < SelectOption > ();
options.add(new SelectOption('---Select--- ' ,'---Select---'));
for(Product__c pd:prodList){
options.add(new SelectOption(pd.Id, pd.Name));
}
return options;
}
/* Task Type */
public List<SelectOption> getTaskTypeList(){
system.debug('***---'+selectProdId);
List < SelectOption > options = new List < SelectOption > ();
takList=[Select id, name, Task_Type_Name__c, Product__c,Product__r.name From Task_Type__c where Product__r.id=:selectProdId];
system.debug('tasklist'+takList);
options.add(new SelectOption('---Select--- ','---Select---'));
for(Task_Type__c t:takList){
options.add(new SelectOption(t.Id, t.Name));
system.debug('under forloop'+t);
}
return options;
}
Please help me in this!