Datepicker is not working in AJAX JSF page
===

I have a JSF page with Datepicker. The problem is when I use AJAX to update the data into the page. After I execute AJAX action the page is datepicker is not working:

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui">
        <h:head>
            <ui:insert name="header">           
                <ui:include src="header.xhtml"/>         
            </ui:insert>       
        </h:head>
        <h:body>
            <h1><img src="resources/css/images/icon.png" alt="DX-57" /> Account Center</h1>
            <!-- layer for black background of the buttons -->
            <div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative;  background-color:black">
                <!-- Include page Navigation -->
                <ui:insert name="Navigation">           
                    <ui:include src="Navigation.xhtml"/>         
                </ui:insert>
            </div>	
            <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
                <h:graphicImage alt="Account Profile"  style="position:relative"  value="resources/images/logo_account_profile.png" />
            </div>
            <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">
    
                <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">
    
                    <div id="settingsdiva" style="width:850px; height:500px; position:absolute;  background-color:transparent; top:20px; left:20px">
    
                        <h:form id="form">
                            <table>
                                <ui:repeat var="ud" value="#{AccountProfileController.userData}">
                                    <tr>
                                        <td>User ID</td>
                                        <td>
                                            <h:outputText value="#{ud.userid}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.userid}" rendered="#{AccountProfileController.editable}" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Group ID</td>
                                        <td>
                                            <h:outputText value="#{ud.groupid}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText id="groupid" value="#{ud.groupid}" rendered="#{AccountProfileController.editable}"
                                                         validator="#{ValidatorController.validateEditGroupID}" autocomplete="off">                                        
                                                <f:ajax event="blur" render="groupidvalidator" />                                          
                                            </h:inputText>
                                            <h:message id="groupidvalidator" for="groupid" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Special Number</td>
                                        <td>
                                            <h:outputText value="#{ud.specialnumber}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.specialnumber}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Username</td>
                                        <td>
                                            <h:outputText value="#{ud.username}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.username}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Password</td>
                                        <td>
                                            <h:outputText value="Encrypted" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.passwd}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Date to change password</td>
                                        <td>
                                            <h:outputText value="#{ud.datetochangepasswd}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText styleClass="datepicker" value="#{ud.datetochangepasswd}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Address</td>
                                        <td>
                                            <h:outputText value="#{ud.address}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.address}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>State/Region</td>
                                        <td>
                                            <h:outputText value="#{ud.stateregion}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.stateregion}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Country</td>
                                        <td>
                                            <h:outputText value="#{ud.country}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.country}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>User Status</td>
                                        <td>
                                            <h:outputText value="#{ud.userstatus}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.userstatus}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Telephone</td>
                                        <td>
                                            <h:outputText value="#{ud.telephone}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.telephone}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Date User Added</td>
                                        <td>
                                            <h:outputText value="#{ud.dateuseradded}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText styleClass="datepicker" value="#{ud.dateuseradded}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>User Expire Date</td>
                                        <td>
                                            <h:outputText value="#{ud.userexpiredate}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText styleClass="datepicker" value="#{ud.userexpiredate}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Date User Locked</td>
                                        <td>
                                            <h:outputText value="#{ud.dateuserlocked}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText id="datetouserlocked" styleClass="datepicker" value="#{ud.dateuserlocked}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>City</td>
                                        <td>
                                            <h:outputText value="#{ud.city}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.city}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>E-mail</td>
                                        <td>
                                            <h:outputText value="#{ud.email}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.email}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
                                    <tr>
                                        <td>Description</td>
                                        <td>
                                            <h:outputText value="#{ud.description}" 
                                                          rendered="#{not AccountProfileController.editable}" />
                                            <h:inputText value="#{ud.description}" rendered="#{AccountProfileController.editable}" />
                                        </td>                                    
                                    </tr>
    
                                </ui:repeat>
                            </table>
                            <!-- Insert this in order to use JGrown message-->                           
                            <p:growl id="growl" showDetail="true" sticky="true" />
                            <h:commandButton value=" Edit Account " rendered="#{not AccountProfileController.editable}" action="#{AccountProfileController.editAccount(true)}" >
                                <f:ajax render="@form" execute="@form"></f:ajax>
                            </h:commandButton>&nbsp;                        
                            <h:commandButton value=" Save Account " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.saveData}" update="growl">
                                <f:ajax render="@form" execute="@form"></f:ajax>
                            </h:commandButton>&nbsp;
                            <h:commandButton value=" Cancel " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.initDBData}" >
                                <f:ajax render="@form"></f:ajax>
                            </h:commandButton>
                            
                            <script type="text/javascript">
                                //For calendar
                                $(".datepicker").datetimepicker({
                                    inline: true,
                                    showWeek: true,
                                    firstDay: 1,
                                    dateFormat: 'dd-MM-yy'
                                });                            
                            </script>
                            <script type="text/javascript" src="resources/js/tabs.js"></script> 
    
                        </h:form>
    
                    </div>   
    
                    <div id="settingsdivb" style="width:450px; height:500px; position:absolute;  background-color:transparent; top:20px; left:600px">
    
                    </div>               
    
                </div>	
            </div>
    
        </h:body>
    </html>


I tested to remove the AJAX part - the datepicker is working properly. Can you tell me why AJAX prevents the JavaScript to work?