[Résolu] Problème fonction .load par HugoBoudet1 - page 1

Bonjour,

Je suis en train de développer un outil basé un sur la récupération d'infos en JSON depuis une API. Je souhaiterai donc mettre à jour le tableau contenant les infos toutes les 5 secondes par exemple. J'ai vu que beaucoup utilisaient la fonction .load d'AJAX. Cependant, après des jours de recherche je ne comprends pas pourquoi mon code ne fonctionne pas.

Voici le code principal :

<?php 
session_start();
$url = "https://data.orleans-metropole.fr/api/records/1.0/search/?dataset=mobilite-places-disponibles-parkings-en-temps-reel&sort=dispo";
		$raw = file_get_contents($url);
    $json = json_decode($raw);

    function code_couleur($tableau){
      global $json;
      $req = $json->{'records'}[$tableau]->{'fields'}->{'disponibilite'};
      if($req>=75 && $req<=100){
        $sortie = " <span class='badge badge-success'>Disponible</span>";
      }
      if($req>=50 && $req<=75){
        $sortie = " <span class='badge badge-primary'>Entre 50% et 75%</span>";
      }
      if($req>=25 && $req<=50){
        $sortie = " <span class='badge badge-warning'>Entre 25% et 50%</span>";
      }
      if($req<=25 && $req>0){
        $sortie = " <span class='badge badge-secondary'>Moins de 25%</span>";
      }
      if($req==0){
        $sortie = " <span class='badge badge-danger'>Indisponible</span>";
      }
      return $sortie;
    }
?>
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Starter Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
<script>
  setInterval('refresh_tab()', 5000);

  function refresh_tab() {
    $('#tab').load('load.php')
  }
</script>

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/4.3/examples/starter-template/starter-template.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Orléans Métropole</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Synoptique des infrastructures</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
    <div class="alert alert-info alert-dismissible fade show" role="alert" style="text-align: center">
        Version de développement - Hugo BOUDET- Mis à jour chaque 2 min par Orléans Métropole
        <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>

        <div id="tab">
        <table class='table table-bordered' style='margin-top: 20px;' id='tableau'>
        <thead class='thead-dark'>
          <tr style='text-align: center'>
            <th scope='col'>Nom</th>
            <th scope='col'>Places disponibles</th>
            <th scope='col'>Capacité totale</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[0]->{'fields'}->{'name'}; echo code_couleur(0);?></th>
            <td><?php echo $json->{'records'}[0]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[0]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[1]->{'fields'}->{'name'}; echo code_couleur(1);?></th>
            <td><?php echo $json->{'records'}[1]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[1]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[2]->{'fields'}->{'name'}; echo code_couleur(2);?></th>
            <td><?php echo $json->{'records'}[2]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[2]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[3]->{'fields'}->{'name'}; echo code_couleur(3);?></th>
            <td><?php echo $json->{'records'}[3]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[3]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[4]->{'fields'}->{'name'}; echo code_couleur(4);?></th>
            <td><?php echo $json->{'records'}[4]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[4]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[5]->{'fields'}->{'name'}; echo code_couleur(5);?></th>
            <td><?php echo $json->{'records'}[5]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[5]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[6]->{'fields'}->{'name'}; echo code_couleur(6);?></th>
            <td><?php echo $json->{'records'}[6]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[6]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[7]->{'fields'}->{'name'}; echo code_couleur(7);?></th>
            <td><?php echo $json->{'records'}[7]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[7]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[8]->{'fields'}->{'name'}; echo code_couleur(8);?></th>
            <td><?php echo $json->{'records'}[8]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[8]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[9]->{'fields'}->{'name'}; echo code_couleur(9);?></th>
            <td><?php echo $json->{'records'}[9]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[9]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[10]->{'fields'}->{'name'}; echo code_couleur(10);?></th>
            <td><?php echo $json->{'records'}[10]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[10]->{'fields'}->{'total'};?></td>
          </tr>
        </tbody>
      </table>
      </div>

<script type="text/javascript">
    document.getElementById("tableau").deleteRow(11); // on supprime la dernière ligne du tableau qui est une erreur
</script>


</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script></body>
</html>

Voici maintenant le fichier afin de mettre à jour :

        <table class='table table-bordered' style='margin-top: 20px;'id="tableau">
        <thead class='thead-dark'>
          <tr style='text-align: center'>
            <th scope='col'>Nom</th>
            <th scope='col'>Places disponibles</th>
            <th scope='col'>Capacité totale</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[0]->{'fields'}->{'name'}; echo code_couleur(0);?></th>
            <td><?php echo $json->{'records'}[0]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[0]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[1]->{'fields'}->{'name'}; echo code_couleur(1);?></th>
            <td><?php echo $json->{'records'}[1]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[1]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[2]->{'fields'}->{'name'}; echo code_couleur(2);?></th>
            <td><?php echo $json->{'records'}[2]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[2]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[3]->{'fields'}->{'name'}; echo code_couleur(3);?></th>
            <td><?php echo $json->{'records'}[3]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[3]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[4]->{'fields'}->{'name'}; echo code_couleur(4);?></th>
            <td><?php echo $json->{'records'}[4]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[4]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[5]->{'fields'}->{'name'}; echo code_couleur(5);?></th>
            <td><?php echo $json->{'records'}[5]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[5]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[6]->{'fields'}->{'name'}; echo code_couleur(6);?></th>
            <td><?php echo $json->{'records'}[6]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[6]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[7]->{'fields'}->{'name'}; echo code_couleur(7);?></th>
            <td><?php echo $json->{'records'}[7]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[7]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[8]->{'fields'}->{'name'}; echo code_couleur(8);?></th>
            <td><?php echo $json->{'records'}[8]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[8]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[9]->{'fields'}->{'name'}; echo code_couleur(9);?></th>
            <td><?php echo $json->{'records'}[9]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[9]->{'fields'}->{'total'};?></td>
          </tr>
          <tr>
            <th scope="row"><?php echo $json->{'records'}[10]->{'fields'}->{'name'}; echo code_couleur(10);?></th>
            <td><?php echo $json->{'records'}[10]->{'fields'}->{'dispo'};?></td>
            <td><?php echo $json->{'records'}[10]->{'fields'}->{'total'};?></td>
          </tr>
        </tbody>
      </table>

Merci beaucoup de votre aide

HugoBoudet1

1 octobre 2019 à 23:17:41