0

When I modify any row data then make respective checkbox checked by Jquery in VF Page.

I've tried the below jquery code but it is not working as required.

<apex:page standardController="Assessment__c" sidebar="false" showHeader="false" showChat="true" extensions="Assessment2ctrl">

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>

    $(".mc").change(function(e){
         var r = confirm("Are you sure you want to edit these activities?");                
        $(this).parent('.cc_row').find('.chkSel').prop('checked',true);  
    }); 
</script>
//I've tried the above script but script is not working 

<apex:form >
    <apex:pageBlock id="block1">
        <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockSection title="Assessments" id="Assessments" columns="1" collapsible="true" >
                <apex:outputPanel id="ButnRef">
                     <apex:actionStatus id="actStatusId" >
                        <apex:facet name="start" >
                            <img src="/img/loading.gif" />                    
                        </apex:facet>
                     </apex:actionStatus>
                     <apex:commandButton value="Refresh table" style="float:right;" reRender="refTble" status="actStatusId"/> 
                    <apex:commandLink action="{!createAssesmnt}" target="_blank"><apex:commandButton value="New Assesment" style="float:right;" reRender="ButnRef"/></apex:commandLink>        
                   <apex:commandButton action="{!updateAss}" value="Update Assesment" style="float:right;" reRender="refTble" status="actStatusId" /> 
                   </apex:outputPanel>


                <apex:outputPanel Id="blockrefresh"> 
                <apex:pageBlockTable value="{!Asses}" var="a" Id="refTble" styleClass="cc_row">
                     <apex:column headerValue="Select" >
                     <apex:inputCheckbox value="{!a.selected}"  styleClass="chkSel" id="my_chk_bx"/>
                    </apex:column>

                    <apex:column headerValue="Description"  styleclass="mc">
                        <apex:inputField value="{!a.asm.Assessment_Description__c}" style="overflow:hidden"/>
                    </apex:column>

                    <apex:column headerValue="Last Screening" styleclass="mc">
                        <apex:inputField value="{!a.asm.Last_Screening__c}" style="overflow:hidden"/>
                    </apex:column>

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

1 Answer 1

1

Replace $(this).parent('.cc_row') with $(this).closest('.cc_row').

Because the structure of apex:pageBlockTable might differ and would be as:

table.mc > tr > td.cc_row

With parent you only access its own tr; whereas element with class name chkSel might exist in different tr. Closest is much cleaner and helpful in this scenario.

Documentation for jQuery closest.

4
  • your above statements seem no difference.
    – user29314
    Commented Nov 14, 2017 at 9:38
  • I've added ` $(document).ready(function() ` in my code. When I changed in one of the row then it marked the all row checkbox to true. also When I click on refresh button then nothing happen on modification.
    – user29314
    Commented Nov 14, 2017 at 9:52
  • enclose your document.ready inside a apex:outputPanel and rerender it from button. it happens because the dom listener are removed after rerender.
    – Raul
    Commented Nov 14, 2017 at 10:30
  • If I've added document.ready in side apex:outputPanel then it's not working on page load also.
    – user29314
    Commented Nov 15, 2017 at 7:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .