Les liens en ajax

IMK
Javascript

Bonjour
Au faite je voudrais faire une nouvelle version de mon application et l'ancienne version à chaque click je charge la page entière et sur cette nouvelle version je voudrais bien faire mes liens avec ajax de tel sorte que je veux charger simplement une partie de la page et non la page entière.
sachant que tous mes liens sont dans la balise <a href="contenu.php" >inscriptions</a>
Et du coup j'ai un petit souci pour récupérer tous mes lien en ajax donc svp aidez-moi je vous remercie.

7 réponses

popotte
Réponse acceptée

Salut, tu peux cntinuer d'utiliser les liens classiques en utilisant Turbolinks ;)

npm install turbolinks

Dans ton app.js

import Turbolinks from 'turbolinks'
Turbolinks.start()

Et c'est bon! tes liens <a href> ne rechargeront plus les pages :)

Et il y a une nouvelle version de Turbolink sinon: Turbo

https://turbo.hotwired.dev/

Mais c'est fait pour RubyOnRails, tuu peux trouver l'équivalent de Hotwire Turbo dans d'autres frameworks, par exemple ça pour Laravel:

https://github.com/tonysm/turbo-laravel

Et si il n'existe pas d'équivalent dasn ton framework, turbolinks ça fonctionne très bien :p

IMK
Auteur
Réponse acceptée

Good thanks

IMK
Auteur

Excusez-moi mais moi je programme avec le langage php et je crois que turbolink ne supporte pas les fichiers php

IMK
Auteur

"
$(document).ready(function(){
$('#lien').click(function(event){
event.preventDefaulte();
link = $(this).attr("href");
$.ajax({
url : link,
dataType: 'html',
success: function (data, textStatus, rawRequest){
$("#ecran").html(data);
},
error:function (data, textStatus, rawRequest){
$("#ecran").html("Erreur de chargement de la page");
}

    });
});

});
"
j'utlise ce code mais malheureusement il me charge la page entière et non seulement le div que je veux

popotte

Dans ton fichier php, tu peux mettre du javascript x)

alors ton script turbolinks comme je l'ai dis tu le met dans un fichier app.js

et dans ton index.PHP tu importes le fichier app

Il n'y a aucun problème de compatibilité, Turbolinks c'est une feature de RubyOnRails, mais en soit ce n'est que du Javascript, c'est d'ailleurs pour ça qu'il ont exportés turbolinks dans NPM, parce que ça fonctionne dans toutes les plateformes et tous les frameworks :p

Par contre HotwiredTurbo (la nouvelle version de turbolinks) je ne sais pas si ça fonctionne, perso j'utilise le bon vieux turbolinks c'est un script tout simple et il fonctionne bien

Et j'utilise Turbolinks dans mes projets Laravel, donc je te confirme que c'est compatible :p

En gros ça donne ca:

  • index.php
  • app.js
  • style.css

index.php:

<head>
    <script src="./app.js" defer></script>
</head>
<body>
    <a href="/ton_autre_page">Le lien est traqué par turbolinks</a>
</body>

app.js:

import Turbolinks from 'turbolinks'
Turbolinks.start() // ce script va traquer tous les liens de ta page, tu n'a rien a configurer tout fonctionne tout seul :p

style.css: ....tu mets ton style x)

IMK
Auteur

Ok merci beaucoup pour votre aide

popotte

de rien ;)

Et dernière chose, si jamais tu veux qu'un lien reste un vrai lien sans passer par turbolinks sufit juste de faire le lien comme ça:

<a href="/" data-turbolinks="false">Turbolinks ne touchera pas à ce lien</a>