Why are my checkbox and double-click functions not responsive?

Question

I have this code making a table on the fly with a checkbox, and refreshing after a minute. The checkbox and double-click functions are not working, and I'm not sure why. Please help.

<script type='text/javascript'>
  function vehicle() {
    $('#Vehicles').html(
      <?php
        $username =$_SESSION['user_name'];
        $sql = "select * from gps_product where gp_userid ='$username'";
        $db = new DbClass($sql);
        echo '"<table>';
        echo '<tr>';
        echo '<th>Name</th>';
        echo '<th>Driver</th>';
        echo '<th>Last Seen</th>';
        echo '<th>Follow</th>';
        echo '<th>Status</th>';
        echo '<th>Speed</th>';
        echo '<th>Engine</th>';
        echo '<th>Address</th>';
        echo '</tr>';
        while ($db->fetch_array()){
            $timezone = $db->get('gp_timezone');
            $sql2 = "SELECT *, date_add(gm_gpstime, INTERVAL ".$timezone." HOUR) gpstime FROM gps_msg
            WHERE gm_imei = '" . $db->get('gp_imei') . "' AND gm_event = '0' ORDER BY gm_gpstime desc LIMIT 1;";
            $db2 = new DbClass($sql2);
            while ($db2->fetch_array()) {
                echo '<tr id=\''.$db->get("gp_imei").'\' class=\'Vehicle\'>';
                echo '<td>';
                echo $db->get("gp_name");
                echo '</td>';
                echo '<td>';
                if ($db->get("gp_sopir"))
                echo $db->get("gp_sopir");
                echo '</td>';
                echo '<td>';
                echo ago(time() - timeToSecond($db2->get('gpstime'), 0));// berapa detik yang lalu
                echo '</td>';
                echo '<td>';
                echo '<center><input type=\'checkbox\' class=\'checkbox\' id=\'';
                echo $db->get("gp_imei");
                echo '\'></input></center>';
                echo '</td>';
                echo '<td>';
                $mode = cekStatusGPS($db2->get('gm_accuracy'), substr($db2->get('gm_devicestate'),0,2));

                echo '<center><img src=\'status/'.$mode.'.png\' width=\'20px\' height=\'20px\'></center>';// status
                echo '</td>';
                echo '<td>';
                echo $db2->get('gm_speed').'km/h';// Kecepatan
                echo '</td>';
                echo '<td><center>';
                if (substr($db2->get('gm_devicestate'),0,1) == '1'){
                    $engine = 'off';
                }
                else if(substr($db2->get('gm_devicestate'),0,1) == '2'){
                    $engine = 'on';
                }
                echo $engine;// engine on/off
                echo '</center></td>';
                echo '<td>';
                if ($db->get('gp_rgeo') == 1) {
                    $posisi = parse_location($db2->get('jalan'). "," . $db2->get('kota'). "," . $db2->get('kabupaten'). "," . $db2->get('propinsi'). "," . $db2->get('negara'). "," . $db2->get('landmark'));
                } 
                else{
                    $posisi = result_location($db2->get('gm_lat'),$db2->get('gm_lng'));
                }
                echo $posisi;// alamat
                echo '</td>';
                echo '</tr>';
            }
        }
        echo '</table>"';
        ?>
    );
  }
 $(document).ready(function() {
    $('#Map').html('<object data="map.php?user=<?php echo $_SESSION['
      user_name ']?>" width="100%" height="100%">');
    $(function() {
      vehicle();
      setInterval(vehicle, 60000);
    });
    $('.checkbox').change(function() {
      if (this.checked) {
        $('#Map').html('<object data="map.php?imei=' + this.id + '" width="100%" height="100%">');
        $('.checkbox').not(this).prop('checked', false);
      } else {
        $('#Map').html('<object data="status.php?user=<?php echo $_SESSION['
          user_name ']?>" width="100%" height="100%">');
      }
    });
    $('.Vehicle').dblclick(function() {
      $('#Status').html('<object data="status.php?imei=' + this.id + '" width="100%" height="100%">');
    });
  });
</script>

i just want to refresh that vehicle div but when i use coding like that checkbox and double-click functions are not working.

Do you realize that php code is never going to update? It will be the same every single time the interval runs!! Why does it not work.... because events do not magically keep binding. — epascarello, Sep 14 '17 at 02:12
So the duplicate answer what needs to be done.... but the table will never get new data. That you need to use Ajax. — epascarello, Sep 14 '17 at 02:15

score 0 · Answer 1 · answered Sep 14 '17 at 02:14

Since you added elements to your page via the echo of PhP, you have to bind them again with .on()

So instead of $('.checkbox').change(function(){});,

change it to $('#Vehicles').change('change', '.checkbox', function(){});

and add that change to your echo.

Note that this will make your PhP messy, so I suggest making the binding into a js function, then calling that function on your echo

Why are my checkbox and double-click functions not responsive?

1 Answers1