ajax调用后div中的日期选择器不起作用

Posted 2023-05-07

【中文标题】ajax调用后div中的日期选择器不起作用

【英文标题】：Datepicker in div not working after ajax call

【发布时间】：2017-05-05 05:18:15

【问题描述】：

我有每个按钮都有他们的 id (idroom)。

当我点击 ajax 调用时，会显示一个日期选择器，其中包含该 ID 的禁用天数。

问题是第一次点击有效，日期选择器显示，但是如果我按下另一个按钮，日期选择器不显示

带有按钮和 div 日期选择器的代码

<div class="form-control" style="height: 224px;">
<div type="text" id="datepicker9" name"datepicker9" /></div>
</div>

<?php
include "controlreservas/conexion.php";
$user_id=null;
$sql1= "select h.id_habitacion,h.valor_habitacion,h.obs,
h.id_residencial,r.id_residencial,r.nombre_residencial,
h.id_tipo,t.id_tipo,t.tipo,
h.numero_habitacion,
h.id_tipo,h.tipo_bano,h.estado,h.imagen
from habitaciones as h 
inner join residenciales as r ON h.id_residencial=r.id_residencial 
inner join tipo_habitacion as t ON h.id_tipo=t.id_tipo order by h.id_habitacion";
$query = $con->query($sql1);
if($query->num_rows>0)
while ($r=$query->fetch_array())
?>
<div style="float:left;border-top-width: 5px;margin-right: 5px;margin-bottom: 5px;margin-left: 5px;margin-top: 5px;" >
<button type='submit' id='buttonValue'  name='buttonValue' onClick='MCNdetails(this)'  value='<?php echo $r["id_habitacion"]?>'  class="<?php if ($r["estado"] == 'Abierta')  echo 'btn btn-sm btn-success';  elseif ($r["estado"] == 'Cerrada')  echo 'btn btn-sm btn-danger'; ?> label-mini">
N&deg;<?php echo $r["numero_habitacion"]; ?> <?php echo $r["nombre_residencial"]; ?><br><?php echo $r["estado"]; ?>
</button>
</div>
<?php

?>

AJAX：

<script>
function MCNdetails(btn) 
var buttonValue = btn.value;
        $.ajax(
                type:'POST',
                url:'GUImostrarcalendario.php',
                data:'buttonValue='+buttonValue,
                success:function(html)
                $("#datepicker9").html(html);
                   
 ); 

</script>

GUImostrarcalendario.php:

<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["buttonValue"];
    $sql1="SELECT llegada,salida,id_reserva FROM reservas where id_habitacion ='$id_habitacion'";
    $query = $con->query($sql1);
    $dates_ar = [];
    if($query->num_rows>0) 
        while ($r=$query->fetch_array()) 
            $begin = new DateTime( $r["llegada"] );
            $end = new DateTime( $r["salida"] );
            $end = $end->modify( '+1 day' ); 
            $interval = new DateInterval('P1D');
            $daterange = new DatePeriod($begin, $interval ,$end);
            foreach ($daterange as $date) 
            $dates_ar[] = $date->format("Y-m-d");
            
        
        ?>
        <script>
            $(function() 
                var disabledDays = <?php echo json_encode($dates_ar)?>;
                var date = new Date();
                 $( "#datepicker9").datepicker( 
                    dateFormat: 'Y-m-d',
                    beforeShowDay: function(date) 
                        var m = date.getMonth() + 1, 
                            d = date.getDate(), 
                            y = date.getFullYear(),
                            strdate = [y,m,d].join('-');
                        if (disabledDays.indexOf(strdate) == -1) 
                            return [true, '', ''];
                        
                        return [false];
                    
                );
            );
        </script>
        <?php
    

    else 
?>
        <script>
            $(function() 
                $( "#datepicker9").datepicker( 
                    dateFormat: 'yy-mm-dd',
           );
            );
        </script>
        <?php

    
?>

你的时间

【问题讨论】：

由于某种原因，我完全错过了您初始化日期选择器的位置。

@Taplar 是显示那个房间id的预定天数，每个按钮都有一个id，我点击对应的按钮，就会出现对应的datepicker。

在 ajax 调用后重新初始化日期选择器。

@ArunprasanthKV 我输入了：success:function(html) $("#datepicker9").html(html); $("#datepicker9").datepicker( dateFormat: 'yy-mm-dd', ); 但它不起作用

你注入的 html 是什么 $("#datepicker9").html(html) 那有什么用？你能告诉我你的要求吗？？

【参考方案1】：

只需包含$("#datepicker9").datepicker("destroy"); 在您的 ajax 成功方法中，还重新初始化日期选择器 检查这个小提琴 Sample