function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sapana WSapana W 

Clear Row function resets input values of whole table

I am facing a problem here that when I click on "Clear"  link for a row the whole datatable values get reset. I am using javascript and am not getting how to pass id of particular row since its datatable in apex and rows repeat. Here's my code

 

 

 

<apex:page controller="ENT_EXT_CommunitiesFRMultipleUpload">

<script>
function clearLine()
{
   
   var reset1 = document.getElementById("partnerselect").value;
   var reset2 = document.getElementById("look-partner").value;
   var reset3 = document.getElementById("yearselect").value;
   var reset4 = document.getElementById("masterselect").value;
   var reset5 = document.getElementById("fileselect").value;
   var reset6 = document.getElementById("filename").value;
    
    var reset1 = '';
    var reset2 = '';
    var reset3 = '';
    var reset4 = '';
    var reset5 = '';
    var reset6 = '';
               
}
</script>

<apex:form id="form1">
   <apex:pageblock >
        <apex:pageblockbuttons location="bottom" style="margin:0 auto; width:50%;">
                           <apex:commandButton onclick=""  value="Upload" action="{!UploadAll}"/>
                           <apex:commandButton immediate="true" value="Add More Rows" action="{!AddLine}" onclick="$.blockUI({ css: { border: 'none', padding: '15px', backgroundColor: '#000', 'webkit-border-radius': '10px', 'moz-border-radius' :' 10px',opacity: .5, color: '#fff'}  });" />
         </apex:pageblockbuttons>
         <br/>
        
         <apex:pagemessages id="upload-msg" escape="false"/> <br/>
         
         <apex:pageblockSection collapsible="false"  title="Contact Information for Uploaded Documents" columns="1">
             
                     <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserName__c.inlineHelptext}"></apex:pageBlockSectionItem>
                
                    <apex:inputfield id="cname" value="{!ProjectInserted[0].UploadedContent.PortalUserName__c}" required="true" />
                
         </apex:pageblockSection>  
        
         <apex:pageblockSection collapsible="false" columns="1">
             
                     <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserEmail__c.inlineHelptext}"></apex:pageBlockSectionItem>
                
                    <apex:inputfield id="cemail" value="{!ProjectInserted[0].UploadedContent.PortalUserEmail__c}" required="true"/>
                
         </apex:pageblockSection>
        
         <apex:pageblockSection collapsible="false" columns="1">
                    <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserPhone__c.inlineHelptext}"></apex:pageBlockSectionItem>
                    <apex:inputfield id="cphone" value="{!ProjectInserted[0].UploadedContent.PortalUserPhone__c}"/>
        </apex:pageblockSection>
        
       <apex:dataTable columns="5" value="{!ProjectInserted}" var="pi" cellspacing="2" cellpadding="2" width="100" id="tbl">
         <apex:column >
                  <apex:facet name="header">Choose Partnership or LLC</apex:facet>
                  
                  <apex:outputPanel rendered="{!IF($Profile.Name=='FR Portal_Customer Portal Manager Custom',true,false)}">
                       <apex:selectList onchange="DuplicateDocument(this.name);"  id="partnerselect" style="width:300px; overflow:visible;"  size="1" value="{!pi.CPAPartner}">
                           <apex:selectOptions Value="{!PartnershipList}">
                           </apex:selectOptions>
                       </apex:selectList>
                  </apex:outputPanel>
                  <apex:outputPanel rendered="{!IF($Profile.Name!='FR Portal_Customer Portal Manager Custom',true,false)}">
                             <apex:inputField id="look-partner" value="{!pi.UploadedContent.CPA_Portal_Partnership__c}"  />
                  </apex:outputPanel>           
         </apex:column>  
         <apex:column >
                      
                      <apex:facet name="header">Year</apex:facet>
                       <apex:selectList id="yearselect" size="1" onchange="DuplicateDocument(this.name);" value="{!pi.UploadedContent.Year__c}" >
                         <apex:selectOptions value="{!YearSelectList}">
                         </apex:selectOptions>
                      </apex:selectList>
        </apex:column>          
        <apex:column >
                     
                   <apex:facet name="header">Document Type</apex:facet>
                    <apex:selectList onchange="DuplicateDocument(this.name);" id="masterselect" size="1" value="{!pi.SelectedMasterDocument}"  >
                       <apex:selectOptions value="{!MasterDocumentList}">
                       </apex:selectOptions>
                     </apex:selectList>
       </apex:column>
       <apex:column >     
                    <apex:facet name="header">Select a File</apex:facet>       
                    <apex:inputFile id="fileselect" title="Please click Browse to select or replace a file." fileName="{!pi.PathOnClient}" value="{!pi.FileBody}" />

        </apex:column>
        <apex:column >
                    <apex:outputPanel id="filename"></apex:outputPanel>
        </apex:column>
        <apex:column >
                   <apex:commandLink id="clearlink" title="Please click Clear to clear the contents of the fields on this row."  onclick="clearLine()" styleClass="cancel">Clear</apex:commandLink>
        </apex:column>          
         
       </apex:dataTable>      
      </apex:pageblock>
    </apex:form>
</apex:page>

Avidev9Avidev9

Lets make this super easy using jQuery!

 

<apex:page controller="ENT_EXT_CommunitiesFRMultipleUpload">
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
  <script>
      function clearLine(elemClass)
      {
         $('.'+elemClass).val('');
       
                     
      }
   </script>
   <apex:form id="form1">
      <apex:pageblock >
         <apex:pageblockbuttons location="bottom" style="margin:0 auto; width:50%;">
            <apex:commandButton onclick=""  value="Upload" action="{!UploadAll}"/>
            <apex:commandButton immediate="true" value="Add More Rows" action="{!AddLine}" onclick="$.blockUI({ css: { border: 'none', padding: '15px', backgroundColor: '#000', 'webkit-border-radius': '10px', 'moz-border-radius' :' 10px',opacity: .5, color: '#fff'}  });" />
         </apex:pageblockbuttons>
         <br/>
         <apex:pagemessages id="upload-msg" escape="false"/>
         <br/>
         <apex:pageblockSection collapsible="false"  title="Contact Information for Uploaded Documents" columns="1">
            <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserName__c.inlineHelptext}"></apex:pageBlockSectionItem>
            <apex:inputfield id="cname" value="{!ProjectInserted[0].UploadedContent.PortalUserName__c}" required="true" />
         </apex:pageblockSection>
         <apex:pageblockSection collapsible="false" columns="1">
            <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserEmail__c.inlineHelptext}"></apex:pageBlockSectionItem>
            <apex:inputfield id="cemail" value="{!ProjectInserted[0].UploadedContent.PortalUserEmail__c}" required="true"/>
         </apex:pageblockSection>
         <apex:pageblockSection collapsible="false" columns="1">
            <apex:pageBlockSectionItem HelpText="{!$ObjectType.ContentVersion.fields.PortalUserPhone__c.inlineHelptext}"></apex:pageBlockSectionItem>
            <apex:inputfield id="cphone" value="{!ProjectInserted[0].UploadedContent.PortalUserPhone__c}"/>
         </apex:pageblockSection>
         <apex:dataTable columns="5" value="{!ProjectInserted}" var="pi" cellspacing="2" cellpadding="2" width="100" id="tbl">
            <apex:column >
               <apex:facet name="header">Choose Partnership or LLC</apex:facet>
               <apex:outputPanel rendered="{!IF($Profile.Name=='FR Portal_Customer Portal Manager Custom',true,false)}">
                  <apex:selectList onchange="DuplicateDocument(this.name);"  id="partnerselect" style="width:300px; overflow:visible;"  size="1" value="{!pi.CPAPartner}">
                     <apex:selectOptions Value="{!PartnershipList}">
                     </apex:selectOptions>
                  </apex:selectList>
               </apex:outputPanel>
               <apex:outputPanel rendered="{!IF($Profile.Name!='FR Portal_Customer Portal Manager Custom',true,false)}">
                 <apex:inputField id="look-partner" value="{!pi.UploadedContent.CPA_Portal_Partnership__c}"  styleclass="row-{!pi.Id}"/>
               </apex:outputPanel>
            </apex:column>
            <apex:column >
               <apex:facet name="header">Year</apex:facet>
               <apex:selectList id="yearselect" size="1" onchange="DuplicateDocument(this.name);" value="{!pi.UploadedContent.Year__c}" styleclass="row-{!pi.Id}" >
                  <apex:selectOptions value="{!YearSelectList}">
                  </apex:selectOptions>
               </apex:selectList>
            </apex:column>
            <apex:column >
               <apex:facet name="header">Document Type</apex:facet>
               <apex:selectList onchange="DuplicateDocument(this.name);" id="masterselect" size="1" value="{!pi.SelectedMasterDocument}"  styleclass="row-{!pi.Id}">
                  <apex:selectOptions value="{!MasterDocumentList}">
                  </apex:selectOptions>
               </apex:selectList>
            </apex:column>
            <apex:column >
               <apex:facet name="header">Select a File</apex:facet>
               <apex:inputFile id="fileselect" title="Please click Browse to select or replace a file." fileName="{!pi.PathOnClient}" value="{!pi.FileBody}" styleclass="row-{!pi.Id}"/>
            </apex:column>
            <apex:column >
               <apex:outputPanel id="filename"></apex:outputPanel>
            </apex:column>
            <apex:column >
               <apex:commandLink id="clearlink" title="Please click Clear to clear the contents of the fields on this row."  onclick="clearLine('row-{!pi.Id}');return false" styleClass="cancel">Clear</apex:commandLink>
            </apex:column>
         </apex:dataTable>
      </apex:pageblock>
   </apex:form>
</apex:page>

 Well jquery has pretty nifty set of selectors. Here we used class selector to select a row. We assigned a row a psuedo class by doing styleclass="row-{!pi.Id}"