2

I have a VF page with a pageblockTable which has buttons at the end I need to enable/disable based on the value of a cell in the table row. The last row in the table has text in it, but my script does not seem to pick it up.

What am I doing wrong? The Edit button in row 7 should be enabled because the memo cell has a value, but the alert returns no value. What do I need to change in the script code?

enter image description here

    j$(document).ready(function() {

    var empty = false;
    var mem = '';
    j$('.memo').each(function() {
        alert('in loop');
        mem = j$(this).val();
        if (mem == '') {
            alert(mem);
            j$('[id*=edit]').attr('disabled', 'true');
        } else {
            j$('[id*=edit]').removeAttr('disabled');
        }

        });
});


<apex:pageblockTable styleClass="cc_row" width="95%" rowClasses="odd,even" value="{!CCActivities}" var="cca">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" 
                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
<apex:column styleclass="cc_col8" headerValue="Call Cycle Activity Name">
    <apex:outputLink styleClass="lineId" id="ccaId" value="{!URLFOR($Action.CallCycleActivity__c.View, cca.Id)}" target="_blank">{!cca.Name}</apex:outputLink>
</apex:column>
<apex:column styleclass="cc_col3" headerValue="Main Contact" value="{!cca.Main_Contact__c}"/>
<apex:column styleclass="cc_col8" headerValue="Account Name">
    <apex:outputLink value="{!URLFOR($Action.Account.View, cca.Account__r.Id)}" target="_blank">{!cca.Account__r.Name}</apex:outputLink>
</apex:column>
<apex:column styleclass="memo" headerValue="Instruction Memo" value="{!cca.Main_Contact__r.LastMemoContent__c}"/>
<apex:column styleclass="cc_col3" headerValue="Add/Edit Memo">
    <apex:commandButton value="Add"                                     action="/a08/e?RecordType=012O00000008w52&CF00NO0000001OYtC={!cca.Main_Contact__r.Name}&CF00NO0000001OYtC_lkid={!cca.Main_Contact__r.Id}&00NO0000001O4at=Information&saveURL=/apex/CallCycleListView?id={!cca.CallCycle__c}&retURL=/apex/CallCycleListView?id={!cca.CallCycle__c}&CF00NO0000001ZgWh={!cca.Name}&00NO0000001OYtH=CC%20Instruction" />-->
    <apex:commandButton value="Edit" disabled="true" id="edit"                                                      action="/a08/e?id={!cca.Main_Contact__r.Last_Memo__c}&saveURL=/apex/CallCycleListView?Id={!cca.CallCycle__c}&retURL=/apex/CallCycleListView?id={!cca.CallCycle__c}" />
</apex:column>                       

  • 1
    try .text() instead of .val(). It is not an input it should be a div or td – Eric Oct 5 '15 at 21:44
  • Thanks Eric, that worked to pick up the content! Now the enabling of the Edit button is still not working though (sorry my javascript is not the best!) - could you help me with that? – Irene Oct 5 '15 at 21:56
2

Use .text() instead of .val(). It is not an input it should be a div or td

For the edit button use the "ends with" selector and disabled should be disabled for a value not true:

j$('[id$=edit]').attr('disabled','disabled');

or try

j$('[id$=edit]').prop("disabled",true);

Example Using Account that works

<apex:page standardController="Account" cache="false">

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>


<script>

    $(document).ready( function(){
        $('[id$=testbtn]').prop('disabled',true);
    });

</script>

<apex:form >

    <apex:commandButton id="testbtn" onclick="alert('opps'); return false;" value="Try Me" rerender=""/>


</apex:form>



</apex:page>
  • I tried both, but neither work... I also tried what Scott suggested but no luck with that either. – Irene Oct 5 '15 at 22:54
  • @Irene - Are you getting your alert? Maybe your comparison to '' is wrong – Eric Oct 5 '15 at 23:00
  • Yes, I'm getting the alert – Irene Oct 5 '15 at 23:01
  • @Irene - See my example above where the button is disabled. NOTE: The style does not look disabled, you have to apply that using css, but the button does not work. If you comment out the script stuff you will see the button works. Take that and adapt it to your scenario..... – Eric Oct 5 '15 at 23:07
  • I created your page and that works yes, but maybe mine doesn't because it has multiple instances of the button, as it's in a table. Funny thing is that even though the buttons are all disabled, when I click on any of them, it refreshes the page! Why would that happen? My script is now: j$('.memo').each(function() { mem = j$(this).text(); if (mem == '') { j$('[id$=edit]').prop('disabled',true); } else { alert('true'); j$('[id$=edit]').prop('disabled',false); } – Irene Oct 5 '15 at 23:24
4

Just posting the full solution here, thanks to both @Eric and @Scott:

        (function() {
        var j$ = jQuery.noConflict();

        j$(document).ready(function() {
            j$('.memo').each(function() {
                var hasValue = (j$(this).text());
                alert(hasValue);
                if(!j$(this).text()){
                    j$(this).closest('tr').find('td[id$="add_edit"] input[id$="edit"]').prop('disabled', true);
                } else {
                    j$(this).closest('tr').find('td[id$="add_edit"] input[id$="edit"]').removeProp('disabled');
                }
            });
        });

    })() 

And the VF column looks like this (no disabled setting):

    <apex:column styleclass="add_edit" headerValue="Add/Edit Memo">
  <apex:commandButton value="Add" action="/a08/e?RecordType=012O00000008w52&CF00NO0000001OYtC={!cca.Main_Contact__r.Name}&CF00NO0000001OYtC_lkid={!cca.Main_Contact__r.Id}&00NO0000001O4at=Information&saveURL=/apex/CallCycleListView?id={!cca.CallCycle__c}&retURL=/apex/CallCycleListView?id={!cca.CallCycle__c}&CF00NO0000001ZgWh={!cca.Name}&00NO0000001OYtH=CC%20Instruction" />
  <apex:commandButton value="Edit" id="edit" action="/a08/e?id={!cca.Main_Contact__r.Last_Memo__c}&saveURL=/apex/CallCycleListView?Id={!cca.CallCycle__c}&retURL=/apex/CallCycleListView?id={!cca.CallCycle__c}" />
</apex:column>
2

You have a couple of things going on.

  1. You have <apex:column styleclass="memo" ..., so use j$('[id$="memo"]') instead of j$('.memo') to query the apex:columns.

  2. As @Eric said, use .text() instead of .val() as @Eric said since the apex:columns are tds and not inputs.

  3. If you're using jQuery 1.6+, use .prop(...) instead of .attr(...).

  4. When you're trying to toggle the disabled attribute of the Edit commandButtons, you need to find the commandButtons: you start at the memo column, so you need to go to the closest tr, then find the cc_col3 td, then find the edit input.

Code:

j$(document).ready(function() {
    j$('td[id$="memo"]').each(function() {
        alert('in loop');
        if(!j$(this).text()){
            j$(this).closest('tr').find('td[id$="cc_col3"] input[id$="edit"]').prop('disabled', true);
        } else {
            j$(this).closest('tr').find('td[id$="cc_col3"] input[id$="edit"]').prop('disabled', false);
        }
    });
});

or even simpler:

j$(document).ready(function() {
    j$('td[id$="memo"]').each(function() {
        var hasValue = (j$(this).text());
        j$(this).closest('tr').find('td[id$="cc_col3"] input[id$="edit"]').prop('disabled', !hasValue);
    });
});
  • I tried that but it won't change the attribute for the button. I renamed the td style as there are others with the same style: <apex:column styleclass="add_edit" headerValue="Add/Edit Memo"> It still won't enable the Edit button. – Irene Oct 5 '15 at 22:37
  • I also added an id to the column: <apex:column styleclass="add_edit" id="add_edit" headerValue="Add/Edit Memo"> and tried with both the 'disabled' and the 'rendered' attribute, but that doesn't work either. <apex:commandButton value="Edit" disabled="true" id="edit" ... <apex:commandButton value="Edit" rendered="false" id="edit" ... – Irene Oct 5 '15 at 22:51

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.