jQuery / PHP-基于按钮值的时间表

时间:2018-11-15 16:53:23

标签: php jquery

我正在制定使用每小时预订的时间表。前端在Bootstrap框架上,后端在使用PHP,MySQL和JQuery。

我的“ 事件”表的设置如下:

id | name  | day | time  | hotel           | host
1  | Test  | 1   | 01:00 | https://url.com | Name
1  | Test2 | 1   | 05:00 | https://url.com | Name

我想显示从标记为星期一星期二星期三星期四< / strong>,依此类推。

以下是日期按钮的内容:

            <form id="dayselect">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="1">Mon</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="2">Tue</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="3">Wed</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="4">Thu</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="5">Fri</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="6">Sat</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" type="submit" class="btn btn-default dayselect" name="day" value="7">Sun</button>
                </div>
            </div>
            </form>

以下是当前日期时间表的内容:

        <div class="row" id="timetableinfo">
        <?php
            $date_format = 'N';
            $day = date($date_format);
            for ($j = 0; $j <= 23; $j++) {
                if ($j < 10) {
                    $time = "0{$j}:00";
                } else {
                    $time = "{$j}:00";
                }
                $query = $dbh->prepare("SELECT * FROM events WHERE day=:day AND time=:time ORDER BY time ASC");
                $query->execute(array(":day"=>$day, ":time"=>$time));
                $queryData = $query->fetch(PDO::FETCH_ASSOC);
        ?>
            <div class="col-md-2">
                <div class="event-time-wrap">
                    <div class="event-time">
                        <p><?php echo $time; ?></p>
                        <p><?php echo $queryData['host'] ? $queryData['host'] : '-'; ?></p>
                        <?php
                            if ($queryData['name'] != "") {
                                if (filter_var($queryData['hotel'], FILTER_VALIDATE_URL)) {
                        ?>
                        <a href="#" class="btn btn-gr eventlink">ENTER</a>
                        <?php
                                } else {
                                    echo $queryData['name'];
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
        <?php
            }
        ?>
        </div>

以下是我用于 JQuery 按钮单击的内容:

           $('button.dayselect').click(function() { 
                var formData = $(this).attr("value");
                $.ajax({
                    url: 'timetabledata.php',
                    type:'POST',
                    data: formData,
                    success: function(html)
                    {
                        $("#timetableinfo").html(html);
                    }
                });
                return false;
            });

以下是我为 timetabledata PHP文件显示的新时间表/天的内容:

       <?php
            require_once '../panel/includes/config.php';
            $day = date($_REQUEST['day'], 'N');
            for ($j = 0; $j <= 23; $j++) {
                if ($j < 10) {
                    $time = "0{$j}:00";
                } else {
                    $time = "{$j}:00";
                }
                $query = $dbh->prepare("SELECT * FROM events WHERE day=:day AND time=:time ORDER BY time ASC");
                $query->execute(array(":day"=>$day, ":time"=>$time));
                $queryData = $query->fetch(PDO::FETCH_ASSOC);
        ?>
            <div class="col-md-2">
                <div class="event-time-wrap">
                    <div class="event-time">
                        <p><?php echo $time; ?></p>
                        <p><?php echo $queryData['host'] ? $queryData['host'] : '-'; ?></p>
                        <?php
                            if ($queryData['name'] != "") {
                                if (filter_var($queryData['hotel'], FILTER_VALIDATE_URL)) {
                        ?>
                        <a href="#" class="btn btn-gr eventlink">ENTER</a>
                        <?php
                                } else {
                                    echo $queryData['name'];
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
        <?php
            }
        ?>

它没有显示任何数据,而是每天点击的24个空白框。当我刷新页面时,它返回到当天的时间表。

问题编辑

没有获取1、2、3等的日值,因此无法正确读取时间,这会导致for循环期间出现空白值。

使用的JQuery与我使用相同的设置相同,但使用select下拉列表却有不同的设置,

0 个答案:

没有答案