4 Replies Latest reply on Dec 7, 2017 6:09 AM by itays100

    Datepicker is not working after ajax call using <a4j:commandButton

    itays100 Newbie

      Hi All,

       

      I'm trying to integrate datepicker jQuery beautiful plugin to an existing JSF application.

      The application used seam 2.1.2, jsf 1.2, ricfaces 3.3.3 and facelets.

       

      I've managed to solve the jQuery version conflict so I can use the jQuery version 1.9.1 along with the richfaces

      included version which is 1.3.2.

       

      The datepicker working  fine on the first instance of the page. When the user press the button there is an ajax call (richfaces) and

      when validation errors appear, the datepicker is not available anymore (datepicker script is not available after a4j ajax call).

       

      Here is a small screenshoot of the code:

       

         <script src="js/jquery-1.9.1.min.js"></script>
        
      <script src="js/bootstrap-datepicker.min.js"></script> 

        
      <a4j:form id="myForm" ajaxSubmit="true" styleClass="formClass">

             
      <h:inputText id="start_date" styleClass="form-field datepicker"   value="#{myBean.myObj.startdate}" />  

             
      <a4j:commandButton styleClass="submitstyle" id="saveEntity" value="Add entity"
                  
      action="#{myBean.addEntity}" reRender="myForm"/>

        
      </a4j:form>

      <script>  
        $
      (window).load(function(){
        applyDatePicker
      ();  
        
      });

        
      function applyDatePicker(){
        jQuery
      (".datepicker").datepicker({
        
      inline: true,
        showWeek
      : true,
        firstDay
      : 1,
        dateFormat
      : 'dd-MM-yy'
        
      });  

        
      })

        
      </script>

       

      As you can see the datepicker is run only on load. It need to be available anytime.

      Is anyone have an idea on how to make sure the datepicker will not disappear?

       

      Thanks!