Adding values to tables with JQuery. Table created with PHP loop

Question

I am trying to make a form which let you see boarding times per day. The table is created with PHP. Having a row for every day of the week, except Saturday and Sunday:

<?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>';
    }
}
?>

When someone selects their destination, the corresponding times need to show in the table above. Selection is done with AJAX request and returns the times in an array. No more than 4 boarding times are possible.

I am trying to get it working with JQuery, but nothing happens.

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

    }

  });

});

What is the best way to get it to work?

EDIT: Turns out I use 2 class definition on the input element. The bootstrap class and another for selecting it. I put them together and all works.. Thanks for all you help people! Really love this community!

"nothing happens"...more debugging info is required please to narrow down the problem. Have you used your browser's developer tools to monitor what is happening? set breakpoints in your JS code, watch the Network tools to see the AJAX request and check it's sent, and what response you get back, watch the console for errors. Unless your change event is not bound correctly, then I doubt that nothing is happening. However there are a number of places it could go wrong, and the code alone is not generally enough to be sure where it is. — ADyson
– ADyson, Commented Jul 2, 2018 at 9:27
One quick observation though: It seems to me that var tdContent = $(this).find('.BoardingMorning'+j); will never work - the only elements with the class "BoardingMorning" in your code are the radio buttons, but they literally have the class "BoardingMorning"...however the code is asking to find "BoardingMorning0", "BoardingMorning1" etc etc, due to the addition of the value of j to the selector. You don't have any elements with those classes, so it will never select anything. — ADyson
– ADyson, Commented Jul 2, 2018 at 9:30
You are right. After chancing that, no luck though :( The AJAX request works fine. I can get it to work with only "monday". Console.log(tdContent) gives me this 20x: w.fn.init [prevObject: w.fn.init(1) 5 days a week times 4 times a day. So the amount is right, but it doesn't alter my input value and div content with class "time". — Stephan Tips
– Stephan Tips, Commented Jul 2, 2018 at 10:28
so what did you change it to? If you still have broken code, we need to see it to know what might be wrong. Update your question. — ADyson
– ADyson, Commented Jul 2, 2018 at 10:45

Abdes · Accepted Answer · 2018-07-02 10:00:52Z

There is an easy solution:

you can create a response.php file like this:

url used for example:

response.php?station=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>

in your javascript you can load data from response.php file like this:

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

and data will be loaded in div with class="BoardingTimeMorning"

I hope this could help you.

Collectives™ on Stack Overflow

Adding values to tables with JQuery. Table created with PHP loop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related