4

Is it possible to bind to the onComplete event for an <apex:commandButton/>?

Instead of using the following format:

<script>
function myOnComplete(){
    // do onComplete stuff
}
</script>
<apex:commandButton action="{!myAction}" onComplete="myOnComplete();"/>

I would prefer to use jQuery to bind to the onComplete event, but have not had any luck:

<script>
var jQuery = $.noConflict(true);
jQuery(document).ready(function($){
    $('.myCmdButton').on('complete', function(){
        // do onComplete stuff
    });
});
</script>
<apex:commandButton action="{!myAction}" styleClass="myCmdButton" />

I've also tried to use the ajaxComplete event and then check the source as I have seen suggested, but this event doesn't seem to fire...

$(document).on('ajaxComplete', function(event, xhr, options){});
Improve this question
3
  • 1
    What are trying to accomplish? Could you brief your exact requirement? Here is the link to have jQuery ajax request: tgerm.com/2010/02/visualforce-salesforce-jquery-ajax-how.html Commented Nov 10, 2014 at 20:53
  • 1
    My apologies.... I am new to Salesforce stack exchange.... Commented Nov 11, 2014 at 4:58
  • Can you explain a bit why you are preferring to use jQuery bindings? Knowing the end goal will help a lot in providing suggestions for new approaches. Commented Oct 29, 2016 at 2:17

3 Answers 3

Reset to default
1

One possible work around I was able to find is to use a globally scoped function that is overridden within the jQuery.ready() section. Would like to see a better solution than this...

<script type="text/javascript">
// scope globally
var myOnComplete = function(){}

// Alias jQuery for noConflict
jQuery = $.noConflict(true);
jQuery(document).ready(function($){

    // redefine on jQuery.ready()
    myOnComplete = function(){
        var $doc = $(document);
        console.log('We can use jQuery $ here');
    }

}
</script>

<apex:commandButton 
    action="{!myAction}"
    value="My Action" 
    reRender="myTable" 
    id="myAction" 
    onComplete="myOnComplete();" />
Improve this answer
1
  • If this question was answered by yourself, you should accept this answer. Otherwise, you could put a bounty on the question, asking for a better answer, but it may not be relevant now, seeing how old this question is. Commented Apr 19, 2017 at 20:31
0 
<script>
var $ = jQuery.noConflict();
function myOnComplete(){
    // do onComplete stuff
}

</script>
<apex:commandButton action="{!myAction}" onComplete="myOnComplete();" />
Improve this answer
3
  • Your example doesn't use jquery to bind to the event, you at using the onComplete attribute as in my example. I specifically need to know how to bind to complete using jquery.on(). Commented Jun 4, 2015 at 17:08
  • Oncomplete attribute IS javascript. It is a shortcut. Commented Jun 4, 2015 at 18:36
  • Can you write it using jquery.on() then? Commented Jun 5, 2015 at 15:14
0

First give your button an ID which can be used in jquery. then access that button using jquery partial ID selector and bind it with the event you want. 

$('.myCmdButton').on('complete', function(){ // do onComplete stuff });

try replacing above code with below one:

jQuery( 'button[id$=yourId]' ).on('complete', function(){ //ur code. }) ;

Visit below link for more about partial ID selector inside VF. Jquery in VF

mark it as correct and upvote if it helped. 😊

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.