Execute Javascript after ActionFunction completes

Question

I have the following on a Visualforce page:

<apex:actionFunction action="{!updateName}" name="updateName"/>

<apex:inputField value="{!C.Name}" onChange="processName();"/>

<script>

     function processName() {
         // Some processing takes place here before action function is invoked.
         updateName();
     }

</script>

And the updateName method on my controller:

 public PageReference updateAssignee() {
     // Update the case name and perform a partial page refresh
     return null;
 }

However I'd like to run some Javascript after the partial page refresh, I modified my actionFunction invocation code to implement a callback:

function processName() {
     updateName( function() {
         alert('Name has been updated');
     });
}

But it doesn't seem to work. What's the generally accepted way to invoke JS after a partial page refresh? Ideally I'd like to persist a JS global var between it, although I don't know if the state is refreshed after PPRF.

Answer 1

When calling Javascript after the action function completes you would use the oncomplete property of the actionfunction:

<script>
    function myJSFunction(){ alert("hi"); }
</script>

<apex:actionfunction name="test" action="{!myAction}" oncomplete="myJSFunction();"/>

What I have done to pass controller properties to JS for use in the oncomplete is to rerender a script block as such:

<apex:outputPanel layout="block" id="post_processing">
   <script>
        var myPersistantVar = "{!controllerProperty}";
   </script>
</apex:outputPanel>

Which would be used as follows:

<script>
    function myJSFunction(){ alert(myPersistantVar); }
</script>

<apex:actionfunction name="test" action="{!myAction}" oncomplete="myJSFunction();" rerender="post_processing"/>

Keep in mind that JS var populated with merge syntax do not update when the controller values update unless you rerender them.