Добавление значений в таблицы с помощью JQuery. Таблица создана с помощью цикла PHP - PullRequest
Новая
       7

Добавление значений в таблицы с помощью JQuery. Таблица создана с помощью цикла PHP

0 голосов
/ 02 июля 2018

Я пытаюсь сделать форму, которая позволит вам видеть посадку раз в день. Таблица создана с помощью PHP. Наличие ряда для каждого дня недели, кроме субботы и воскресенья: 

<?php
for ($i = 1; $i < 8; $i++){

    $d=strtotime("+".$i." Day");
    if (date("l", $d) !== "Saturday" && date("l", $d) !== "Sunday" ){
        $daydate = $dayOfWeek[date("l",$d)] . date(" d ", $d) .  $month[date("F",$d)];

        echo "<tr>";
        echo "<td>". $daydate . "</td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "</tr>";

        echo '<tr class="BoardingTimeMorning">';
        echo '<td style="padding-left: 30px">
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input> <div class="time">0:00</div>
              </td>

            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>
            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>
            <td>
                <input class="form-check-input" type="radio" name="'.$dayOfWeek[date("l",$d)].'-to" class="BoardingMorning" value=""></input><div class="time">0:00</div>
            </td>   
        </tr>';
    }
}
?>

Когда кто-то выбирает пункт назначения, соответствующее время должно отображаться в таблице выше. Выбор выполняется с помощью запроса AJAX и возвращает время в массиве. Возможна посадка не более 4 раз.

Я пытаюсь заставить его работать с JQuery, но ничего не происходит.

JQuery: 

$('#boardingplace').change(function() {
$.ajax({
    type: 'POST', 
url: 'reservePage.php', 
dataType: 'JSON',
data: {
        'station': this.value 
    },

    success: function(response){
        var len = response.length;
        console.log("length: "+len);

        $( ".BoardingTimeMorning" ).each(function() {

            for (var j=0; j<4; j++){
                //visibitly off
                var tdContent = $(this).find('.BoardingMorning'+j);
                console.log (tdContent);
                tdContent.css("display", "none");
                tdContent.next().html("");

                //reset value
                tdContent.attr('value', "");

                if(j - len <= 0){
                //show content according to amount of times
                tdContent.css('display', "block");
                tdContent.attr('value', response[j].slice(0,5));    
                tdContent.next().html(response[j].slice(0,5));
                }
            }
        });

    }

  });

});

Как лучше всего заставить его работать?

EDIT: Оказывается, я использую 2 определения класса для элемента ввода. Класс начальной загрузки и другой для его выбора. Я собрал их вместе, и все работает .. Спасибо за все, что вы помогаете людям! Очень люблю это сообщество!

1 Ответ

0 голосов
/ 02 июля 2018

Существует простое решение:

вы можете создать файл response.php следующим образом:

URL-адрес, используемый, например:

response.php? Станция = 162 

<?php
//response.php

$station=$_GET['station'];

$data_from_database=// your sql Request...


?>
<html>
<div class="datas">

<?php

foreach ($data_from_database  as  $data) {

    echo "<span>".$data['time']."</span>";echo "<br>";
    echo "<span>".$data['name']."</span>";echo "<br>";
}
?>

</html>

в вашем javascript вы можете загрузить данные из файла response.php следующим образом: 

    <script type="text/javascript">
$('#boardingplace').change(function() {
var station= this.value; 
$.ajax({
type: 'GET', 
url: 'response.php?station'+station, 
    success: function(response){

        $(".BoardingTimeMorning").html(response);

    }

  });

});
</script>

и данные будут загружены в div с class = "BoardingTimeMorning"

Надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...