+ Start a Discussion
SforcehariSforcehari 

Editing fiedset fields using Java script..

Hai to Salesforce,

 

         I am using fieldsset s to display fields on Vf page.I have one button to display input fields when click on that edit button.With rendered property it is working fine.But for editing field set need to go to Controller and again rerender...so performance...issue comes in to picture.Now i want to give a try to display and input fields when click on edit button using Javascript...But here i am getting issue.

 

Please help .

 

<apex:component id="RequestComp" controller="Requestcon" allowDML="true" access="global">
<apex:pageMessages id="errorMessage"></apex:pageMessages>
<div id="pg">
<apex:pageBlock mode="maindetail" id="thePB2" title="Request Details">
<div style="{!if(blnRequestData == true,'display:block','display:none')};">
<apex:outputpanel layout="block" style="display:table;">
<h2 style="padding:5px 0 5px 5px !important; float:left;">Request Details</h2></apex:outputpanel>
<div id="RequestDetails">
<apex:outputPanel layout="block" styleClass="bdr_none" >
<apex:pageBlockSection columns="2" id="thePbS">
<apex:repeat value="{!$ObjectType.Request__c.FieldSets.Request_Details_1}" var="RequestFields1" id="theRpt">
<apex:outputfield id="ouputFieldCtFS1" value="{!ContractRequestFS[RequestFields1]}" />
<apex:inputField id="inputFieldCtFS1" value="{!ContractRequestFS[RequestFields1]}"  style ="display:None"/>
</apex:repeat>
</apex:pageblocksection>
</apex:outputPanel>
</div>
</div>
<table style="width:100%;" id="thetbl">
<tr>
<td style="text-align:right;">
<apex:commandButton id="btnEdit" value="Edit" onclick="EditFiedsets('{!iRequestFSCount}');return false;"  rendered="{!if(blnEdit == true,false,true)}" />

<apex:commandButton id="btnCancel" value="Cancel" action="{!CancelEditRequest}" rerender="thePB2,attrPB" rendered="{!blnEdit}" status="acnStatus"/>

<apex:commandButton id="btnSaveid" value="Save" action="{!savetRequest}" rerender="thePB2,attrPB" status="acnStatus" rendered="{!blnEdit}" />
</td>
</tr>
</table>
</apex:pageBlock>
</div>
<script>
function EditFiedsets(requestCount){
if(requestCount!=null && requestCount!=''){
for(var i=0;i<requestCount;i++){
if(document.getElementById('thePage:theForm:theCRComp:ContractRequestComp:thePB2:thePbS:theRpt:'+i+':ouputFieldCtFS1')!=null){
document.getElementById('thePage:theForm:theCRComp:ContractRequestComp:thePB2:thePbS:theRpt:'+i+':ouputFieldCtFS1').style.display='none';
}
if(document.getElementById('thePage:theForm:theCRComp:ContractRequestComp:thePB2:thePbS:theRpt:'+i+':inputFieldCtFS1')!=null){
document.getElementById('thePage:theForm:theCRComp:ContractRequestComp:thePB2:thePbS:theRpt:'+i+':inputFieldCtFS1').style.display='block';
}
}
}
}
</script>
</apex:component>

 

 

Thanks,

Hari babu Amudalapalli

JitendraJitendra

Hi,

 

You can have fields going to be edited as InputField or Inpiut Text and using CSS you can initially hide that field.

 

After button click, you can unhide these fields and hide readonly field, in this way you can save the round trip to server.

Let me know if you need any help in this.

 

Regards,

Jitendra Zaa