Bonjour à tous,

Je réalise une application web avec le framework Laravel sur laquelle il y a un tableau qui affiche tous les éléments d'une table de ma base de données. Mais j'aimerais actualiser toutes les secondes ce tableau pour pouvoir voir en direct lorsqu'un élément est ajouté ou supprimer de la table et non pas devoir rafraîchir ma page entière à chaque fois.

Après plusieurs recherches je penses qu'il faut que j'utilise jquery et ajax mais je comprends pas vraiment comment ils fonctionnent alors si quelqu'un peut m’aiguiller ou me dire comment faire SVP 

Merci

Bonjour,

Peut-être devrais-tu plutôt voir du côté des Websockets : https://www.grafikart.fr/tutoriels/laravel-echo-websocket-890

Merci pour ta réponse mais j'ai regarder les websockets et ce n'est pas exactement ce qu'il me faut, il faut juste que ma div qui contient mon tableau ce réactualise seul toutes les secondes.

Justement si, ça t'évite de rafraîchir toutes le secondes et ne fait la mise à jour que quand la BDD est modifiée.

Mais si tu tiens à faire ça en Ajax ce n'est pas très compliqué, tu fais un appel Ajax toutes les secondes sur ta requête.

Est-ce que tu peux m'en dire un peu plus sur comment faire l'appel Ajax ? (setInterval + load) ?

Si tu utilises Jquery, oui, c'est assez simple : tu exécutes ton appel  Ajax toutes les secondes avec setInterval et récupères les données. après je ne connais pas ton code, mais tu dois pouvoir adapter ceci :

https://openclassrooms.com/fr/courses/1567926-un-site-web-dynamique-avec-jquery/1569757-la-methode-load

J'ai fais comme c'est indiqué mais la console me renvois l'erreur : TypeError : $(...).load is not a function 

Et tu as bien chargé Jquery ?

C'est à dire ? j'ai ajouter ces deux lignes 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

Sinon l'API fetch est standard et ne nécessite pas d'inclure une lib pour le faire. Ne l'oubliez pas.

Mais ouais, pour pas foutre le serveur à genoux en conditions réelles, le pooling toutes les 1 secondes, bof bof. Les websockets sont parfaitement adaptés pour répondre à ce problème.

-
Edité par Genroa 17 avril 2019 à 14:18:43

Es-tu vraiment sur que tu veux faire une requête toutes les secondes ? car 10 utilisateurs te fait du 10 requêtes par seconde au serveur (600 requêtes par minutes) ce qui est énorme.

Déjà un truc pour limiter c'est est-ce que tu as besoin de le faire toute les secondes et pas par exemple toutes les 10 secondes ?

Ensuite il faut éviter de lancer une requête si la précédente n'est pas terminé et il faut donc attendre la fin de la requête :

function loopAjax() {
  $.ajax({
    url: 'ton_url',
    type: 'GET'
  }).done(function (data) {
    console.log(data) // Quand la requête réussi et retourne un 2XX
  }).fail(function (err) {
    console.log(err) // Quand la requête échoue ou retourne un 4XX ou 5XX
  }).always(function () {
    // Quelque soit le résultat il passe dans cette fonction
    setTimeout(function () {
      loopAjax()
    }, 1000) // Quand la requête est finis on attends 1 seconde et on relance la fonction
  })
}

loopAjax()

+1 Genroa avec l'api fetch. Et les websockets c'est exactement ça qu'il lui faut.

-
Edité par quenti77 17 avril 2019 à 14:26:58

quenti77 a écrit:

+1 Genroa avec l'api fetch. Et les websockets c'est exactement ça qu'il lui faut.

-
Edité par quenti77 il y a 5 minutes

Ah ben j'ai essayé de le lui vendre mais je n'ai pas eu de succès

Merci à tous pour vos réponses je penses que je vais abandonné l'idée de réactualisé toutes les secondes et finalement utilisés les websockets