javascript onuploadcomplete function is not fired

Question

In my user control to upload files, both the client-side (funClientUploadComplete, funClientUploadError) and server-side event (uplFile1_UploadedComplete) are not getting fired. After some debugging, found out that the client-side event functions were "undefined". They are clearly defined in the HTML below. Why are they still "undefined"? How can they be successfully defined/bound? I suspect this is also the reason for server-side event function not being called. Please see code below. Appreciate your responses.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
    function funClientUploadComplete() {
        alert('fdj-1');                            // alert box does not show
    }

    function funClientUploadError() {        
        alert('fdj-2');                            // alert box does not show    
    }

</script>

<div style="float: left;">
<asp:GridView ID="grdUploadControls" runat="server" AutoGenerateColumns="False" OnRowDataBound="grdUploadControls_RowDataBound" >
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:AsyncFileUpload ID="uplFile1" runat="server" OnUploadedComplete="uplFile1_UploadedComplete" OnClientUploadComplete="funClientUploadComplete"
                            OnClientUploadError="funClientUploadError" UploaderStyle="Modern" ClientIDMode="AutoID" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Code behind for server-side event: (breakpoint not hit)

   protected void uplFile1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
    {
        // Typecast the source of this event to an AsynFileUpload
        AsyncFileUpload afux = (AsyncFileUpload)sender;
        .....
        .....
    }

Thanks for taking a look!