javascript - Ajax 函数通过单击按钮显示日期选择器

Question

我已经为表(habitaciones)房间中的每个 id 生成了按钮。

当我单击一个按钮时，它应该显示特定的日期选择器，并为该 ID 禁用日期，为此，我放置了一个 Ajax 函数，并根据 ID 显示表单，但它不会发生.

我的带有按钮的代码:

<div type="text" id="datepicker9" /></div>
<?php
include "controlreservas/conexion.php";
$user_id=null;
$sql1= "select id_habitacion from habitaciones";
$query = $con->query($sql1);
if($query->num_rows>0){
while ($r=$query->fetch_array()){?>
<button  type="button" name="buttonValue" onClick="MCNdetails(this)"  value='<?php echo $r["id_habitacion"]?>'  class="btn btn-sm btn-success">
<?php echo $r["id_habitacion"]; ?>
</button>
<?php }}
?>

Ajax :

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


                }
            }); 

}
</script>

GUImostrarcalendario.php

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["buttonValue"];
    $sql1="SELECT llegada,salida 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: 'yy-mm-dd',
                    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

    }
?>
<div type="text" id="datepicker9" /></div>

我需要以这种方式显示日期选择器，而不是加载页面。感谢您抽出时间

Answer 1

我只得到我想要的，操作或调用执行一次，例如按按钮 1 (idroom = 1)，日期选择器会显示其各自的日期，但如果我按按钮 2 不会调用..我认为这很容易解决，现在解决我最想要的问题，以防有人在这里为您提供相同的帖子。

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

<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);
?> 

<?php if($query->num_rows>0):?>
<?php 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 endwhile;?>
<?php else:?>
<p class="alert alert-danger">404 No se encuentra</p>
<?php endif;?>

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
    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

    }
?>

图像: