2

I have a VF page with a command button. It calls a javascript function, and then an actionFunction to call a method in the apex class. Everything was working fine until summer'14 release. Now, when I click on that button, nothing happens (no page load, no method called, nothing captured in debug logs).

Does any have the same issue? or What could be wrong here? (This code was working before)

Here's the code for your reference. (I am refering Assign Button). The corresponding apex method is there in the class, but not being called.

VF Page

<apex:page standardController="Match__c" extensions="AyusaAssignValidatorController" id="AyusaAssignValidator" action="{!FetchValidators}">
<div class="wrapper">
<script>   
 function getSelectedContact()
        {
           var $radio = $('input[name=group1]:checked');
            var updateDay = $radio.val();
            var selected = $radio.attr('id');

            afAssign(selected);
        }
</script>
    <!-- Form -->

    <apex:form >

        <apex:pageBlock >
            <apex:pageMessages id="validationMsg" />
           <apex:pageBlockSection columns="1" title="Choose Validator" collapsible="false" id="pbs">
                <apex:actionStatus startText="Please Wait....." startStyle="font-weight: bold;color: green;" id="loadingMsg"/>

                <apex:pageBlockTable value="{!lstGeoMatchWrapper}" var="item" rendered="{!IF(lstGeoMatchWrapper.Size > 0, true, false)}">
                <!-- columns -->
                </apex:pageBlockTable>

             </apex:pageBlockSection>
        </apex:pageBlock>

        **<apex:commandButton onclick="getSelectedContact();"  value="Assign" id="btn3"  onComplete="Window.close();">
        </apex:commandButton>**
        <apex:commandButton id="cancel" value="{!$Label.site.cancel}" action="{!Cancel}" immediate="true"/>

        **<apex:actionFunction name="afAssign" action="{!Assign}" rerender="pbs">
            <apex:param name="selected" value="" assignTo="{!selected}"/>

        </apex:actionFunction>**
    </apex:form>
</div>
</apex:page>
  • It looks like you are relying on the value of $ being set to something by the platform; people usually include their own copy of jQuery and set their own reference to it which insulates them from platform changes. – Keith C Jul 29 '14 at 8:38
4

This is how you would make sure you are using jQuery (in this case taken from a CDN location):

<apex:includeScript value="https://code.jquery.com/jquery-1.11.0.min.js"/>
<script>
var j$ = jQuery.noConflict();
function getSelectedContact() {
    var $radio = j$('input[name=group1]:checked');
    var selected = $radio.attr('id');
    afAssign(selected);
}
</script>

Including the jquery script redefines $ to be a reference to jQuery. The jQuery.noConflict() restores the preceding definition of $ and so makes sure any other code in the page (such as standard Salesforce code) gets the value of $ that it expects. The the code that wants to use jQuery uses j$.

  • Thanks. The trick is this line. I just added this line to my code and it works. <apex:includeScript VALUE="code.jquery.com/jquery-1.11.0.min.js"> – sfdcFanBoy Jul 29 '14 at 9:54
  • So, after summer release, I have to mention this line explicitly. Earlier I never used in this, but still the code was working absolute perfect. Now, I have to mention it explicitly. – sfdcFanBoy Jul 29 '14 at 9:57
  • @BruceLee By only adding the script you are overwriting the value of $ with jQuery. So if any salesforce generated code is relying on the value of $ you will break that code. Hence the use of jQuery.noConflict(). You may get away without using jQuery.noConflict(), now, but your code could break again after a future Salesforce release. – Keith C Jul 29 '14 at 10:12
0

The error is probably in the Javascript part.

$('input[name=group1]:checked');

I guess you mean to use jQuery, but on Salesforce, the $ function is set to something else. If you type $ in the browser console, you will see that it is only able to lookup elements by ID, not a full fledged CSS selector.

If you want to use jQuery, you need to include it manually and use its noConflict() function to prevent it from clashing with the Salesforce $. It works like this

<apex:includeScript value="https://code.jquery.com/jquery-1.11.0.min.js"/>
<script>
    // jQuery by default overwrites the $ variable, 
    // but that's not what we want, because Salesforce is already using $
    // By using the noConflict() function, we can create our own reference to jQuery
    var $jq = jQuery.noConflict();
    // That's great, we have $jq for jQuery and Salesforce can have $
</script>
  • Im not aware of jQuery. How do I use noConflict() function? – sfdcFanBoy Jul 29 '14 at 8:52
  • @BruceLee noConflict() ensures that jQuery does not overwrite the $ variable that is used by Salesforce. See update to my post. Upvote and/or accept is appreciated. – Willem Mulder Jul 29 '14 at 11:32

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.