Datepicker无法启动

时间:2014-12-13 09:55:58

标签: javascript php jquery ajax jquery-ui

我使用ajax(通过PHP)加载数据:

     $retour.= '

 <table id="dates_stages_comp">
  <tr>
   <th>Nom</th><th>Prénom</th><th>Matricule</th><th>Année</th><th>Dates début</th><th>Date fin</th><th>&nbsp;</th>
  </tr>';

 foreach($resultatSQL as $ligneSQL)
 {

     $retour .= '<tr><td>'.$ligneSQL->nom.'</td>';
     $retour .= '<td>'.$ligneSQL->prenom.'</td>';
     $retour .= '<td>'.$ligneSQL->matricule . '</td>';
     $retour .= '<td>'.$ligneSQL->annee.'</td>';
     $retour .= '<td>'.$ligneSQL->date_debut_stage_comp.'</td>';
     $retour .= '<td><input id="datepicker_debut_s_c" type="text" value="'.$ligneSQL->date_fin_stage_comp.'" /></td>';
     $retour .= '<td><input id="datepicker_fin_s_c" type="text" value="'.$ligneSQL->date_fin_stage_comp.'" /></td>';

 } 

 $retour.='</table>';
 echo $retour;

retour is back in french

This is my js code :

    $('#datepicker_debut_s_c').datepicker(
    {
        dateFormat: 'dd-mm-yy',
        changeYear: true,
        maxDate: null
    });

    $('#datepicker_fin_s_c').datepicker(
    {
        dateFormat: 'dd-mm-yy',
        changeYear: true,
        maxDate: null
    });

    alert($('#datepicker_debut_s_c').length);

   $.ajax
   (
      {
         type: 'POST',
         url: 'dates_stages_complermentaires.php',
         dataType: 'text',
         success: function(retour)
         {
           $('#dates_infos_stages_comp').html(retour);   
        },
        error:function(retour)
        {
            alert(retour);
        }
      }  
   );

问题是我的datepicker没有启动......

alert($('#datepicker_debut_s_c').length);

给我0

上面的代码在里面:

$(document).ready(function() {

1 个答案:

答案 0 :(得分:3)

页面加载后添加到页面的元素不会自动分配给事件监听器,您可以在ajax调用后自行完成。

所以你应该做这样的事情:

$.ajax({ 
    type: 'POST', 
    url: 'dates_stages_complermentaires.php', 
    dataType: 'text', 
    success: function(retour) { 
        $('#dates_infos_stages_comp').html(retour);

        $('#datepicker_debut_s_c').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            maxDate: null
        });     

        $('#datepicker_fin_s_c').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            maxDate: null
        });
    }, 
    error:function(retour) { 
    alert(retour); 
    } 
});

同时检查javascript控制台是否有错误,并确保如果通过ajax创建多个元素,则datepicker元素上的ID是唯一的。