1

I have this jQuery in my Visualforce page that adds some styling and updates the value of a pick list field in the row when a selectCheckbox is checked.

<script type="text/javascript">  
  j$ = jQuery.noConflict();
  j$(document).ready(function() {
      j$('.checkBox').click(function () {          
          j$('.inputStatus').val('Completed')
          j$(this).closest('tr').addClass("selected");
      });
  });        
</script> 

The value gets updated, but for all the rows in the table instead of just the row that is currently selected. How can I limit it?

Also, how can I add a quick save action to that select checkbox as well?

Here is the VF page..

   <apex:page>
 <style>

.selected { text-decoration: line-through; color: #BA3838;


j$ = jQuery.noConflict(); j$(document).ready(function() { j$('.checkBox').click(function () {
j$('.inputStatus').val('Completed') j$(this).closest('tr').addClass("selected"); }); });

<table id="tableId" class="table table-condensed table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th></th>
                <th>Type </th>
                <th>Customer</th>
                <th>Subject</th>
                <th>Notes</th>
                <th>Status</th>
                <th>Deadline</th>
            </tr>
        </thead>
        <tbody> 

       <apex:outputPanel >
          <apex:repeat value="{!List}" var="lst">

                <tr >
                    <td>
                    <apex:selectCheckboxes styleClass="checkBox" > </apex:selectCheckboxes>
                   </td>
                    <td>{!lst.Type__c}</td>
                    <td>{!lst.Customer__c}</td>
                    <td>{!lst.Subject__c}</td>
                    <td>{!lstNotes__c} </td>
                    <td><apex:inputField styleClass="inputStatus" value="{!lst.Status__c}" />  </td>

                    <td width="80"><apex:outputText value="{0, date, MMM'-' d'-'yyyy}">
                        <apex:param value="{!lst.Deadline__c}" /> 
                        </apex:outputText>
                    </td>
                </tr>
            </apex:repeat>
           </apex:outputPanel>
        </tbody>
    </table>
</apex:form>
</apex:page
  • Hi Lizzy, it would help if you posted the VF or resulting HTML of the table – Rob Jul 27 '15 at 11:01
  • Sorry Rob... added it. – Lizzy Li Jul 27 '15 at 11:20
0

Try changing

j$('.inputStatus').val('Completed')

To

j$(this).closest('tr').find('.inputStatus').val('Completed');

This isn't the most efficient approach - you'd be better off using an ID to identify the specific apex:inputField element - but it should work as a starting point.

  • 1
    Thanks @Rob! That makes so much sense to me now. I'll definitely do that, use the ID,... just getting my feet wet. – Lizzy Li Jul 27 '15 at 13:18
  • Glad to hear it, Lizzy. I should have explained that the old selector would select all elements with the .inputStatus class, hence why they were all changing. Please mark this as the answer if this has resolved your issue. – Rob Jul 27 '15 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.