Charger une page PHP sans refresh sans transfert de donnée (remplacer include PHP)

Version imprimable

Bonjour.

Je cherche à remplacer un include php en vu de faire un refresh de cette page à interval régulier.

C'est ce que j'ai tenté de faire:

Je veux juste que la page se load dans une autre page sans que celle-ci soit rafraichi.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> var auto_refresh = setInterval( function () { $('#load_me').load('newuser.php').fadeIn("slow"); }, 5000); </script> <div id="load_me"> <?php include('newuser.php'); ?> </div>

15/12/2017, 21h29
Watilin

Citation:

Envoyé par dancom5

C'est ce que j'ai tenté de faire:

…

Et ça a donné quoi ? Tu as examiné la console et les requêtes réseau avec F12 ?

Je pouvais faire loader sans rafraichir des pages sauf mon fichier newuser.php. Possiblement à cause qu'il y avait déjà du ajax dedans: Alors, j'ai eu l'idée de mettre un intervale de temps dedans.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript"> <!-- pas de dépendance -->
$(function(){
    setInterval( "do_ajax()", 7*60*1000 );
});
 
function do_ajax(){ 
// fetching records
                    function displayRecords(numRecords, pageNum) {
                    $.ajax({
                            type: "GET",
                            url: "newuser_ajax.php",
                            data: "show=" + numRecords + "&pagenum=" + pageNum,
                            cache: false,
                            beforeSend: function() {
                                $('.loader').html('<img src="loader.gif" alt="" width="24" height="24" style="padding-left: 400px; margin-top:10px;" >');
                            },
                            success: function(html) {
                                $("#results").html(html);
                                $('.loader').html('');
                            }
                        });
                    }
// used when user change row limit
                    function changeDisplayRowCount(numRecords) {
                        displayRecords(numRecords, 1);
                    }
                    $(document).ready(function() {
                        displayRecords(12, 1); // (12, 1)
                    });
}
</script>

Ça marche bien, mais j'ai dû doubler le code sans interval pour que ça l'aide dès qu'on entre dans la page.

1 sans interval
2 avec interval.

Mais un autre problème se pose, la liste rafraichi et je dois espacer le temps afin que ça ne rafraichisse pas
pendant qu'on affiche la liste. J'ai mis 7 minutes.

J'avais pensé mettre un truc qui détecterai un changement dans la base de données et de rafraichir que la liste
des nom et non toute la liste avec l'avatar.

Citation:

Envoyé par dancom5

Je pouvais faire loader sans rafraichir des pages sauf mon fichier newuser.php. Possiblement à cause qu'il y avait déjà du ajax dedans: Alors, j'ai eu l'idée de mettre un intervale de temps dedans.

D’après la doc de .load(), les scripts de la page appelée sont exécutés. Ce n’est pas forcément ce que tu souhaites. Tu peux faire comme indiqué dans la doc et rajouter un sélecteur ($( "#result" ).load( "ajax/test.html #container" );) pour n’utiliser qu’une partie du code HTML chargé, dans ce cas les scripts seront ignorés.

Il y a aussi un petit problème dans ton script, qui a peut-être son importance : l’appel à $(document).ready() se trouve à l’intérieur de ta fonction do_ajax. Elle ne sera donc appelée qu’au bout du premier timeout de 7 minutes.

Et puisqu’on parle de ça :

Code:

setInterval( "do_ajax()", 7*60*1000 );

Tu peux le remplacer par :

Code:

setInterval( do_ajax, 7*60*1000 );

Tu as tout à y gagner.

C’est plus efficace : tu passes une référence directe, que les interpréteurs actuels peuvent optimiser, contrairement à une chaîne qui devra être évaluée comme si tu utilisais eval ;
Ça rend les erreurs plus faciles à repérer : avec la seconde forme, s’il y a une erreur, elle est levée au moment où setInterval est appelée ; dans le cas contraire, elle est levée au bout du délai donné, et pas toujours facile à voir suivant les outils de déboguage ;
C’est compatible avec CSP, une extension de HTTP qui permet d’atténuer les risques d’attaques par injection de code (XSS, clickjacking, etc.).

Citation:

J'avais pensé mettre un truc qui détecterai un changement dans la base de données et de rafraichir que la liste
des nom et non toute la liste avec l'avatar.

Pour ça je te conseille de changer ton appel setInterval par un setTimeout astucieusement placé dans la fonction .success de ta requête.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function do_ajax() { ... $.ajax({ ... success: function(html) { $("#results").html(html); $(".loader").html(""); setTimeout( do_ajax, 7*60*1000 ); } }); ... } $(document).ready(function() { displayRecords(12, 1); // (12, 1) do_ajax(); });
Il faut un premier appel à do_ajax pour amorcer le processus, je l’ai mis dans $(document).ready(). Si tu n’as pas besoin de mettre à jour la liste dès le chargement de la page, tu peux mettre un autre setTimeout autour de cet appel.

En fait, de ma propre expérience, je n’ai pas vu beaucoup d’utilisations de setInterval. On est souvent dans une situation où des délais supplémentaires sont rajoutés (ne serait-ce que le temps d’exécution de la fonction), et donc on préfère en général setTimeout qui permet de contrôler plus finement le temps entre une exécution et la suivante.

Bonjour Watilin,

J'ai mis setTimeout dans ma fonction displayRecords et supprimer do_star().
Par le fait même, ça load dès le départ.
Enlevé $(document).ready() dans ma fonction.

Mais j'ai pas bien compris votre premier paragraphe sur «load» par rapport à mon code à propos du selecteur et le conteneur.
Je comprends le fonctionnement du selecteur c'est l'emplacement et l'application dans mon code que je ne comprends pas.

PS, comment vous faite pour mettre en sous-briance dans le texte les termes .load et les autres pour éviter les balises code
pour éviter d'avoir un bloc quand on a juste un terme?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id='results'></div>
<script src="jquery-1.9.0.min.js"></script>
 
<script type="text/javascript"> <!-- pas de dépendance -->
 
// fetching records
                    function displayRecords(numRecords, pageNum) {
                    $.ajax({
                            type: "GET",
                            url: "newuser_ajax.php",
                            data: "show=" + numRecords + "&pagenum=" + pageNum,
                            cache: false,
                            beforeSend: function() {
                                $('.loader').html('<img src="loader.gif" alt="" width="24" height="24" style="padding-left: 400px; margin-top:10px;" >');
                            },
                            success: function(html) {
                                $("#results").html(html);
                                $('.loader').html('');
                                setInterval(displayRecords, 7*60*1000 ); // remplace do_ajax par displayRecords
                            }
                        });
                    }
// used when user change row limit
                    function changeDisplayRowCount(numRecords) {
                        displayRecords(numRecords, 1);
                    }
                        displayRecords(12, 1); // (12, 1)
</script>

16/12/2017, 08h54
ProgElecT

Salut

Citation:

Envoyé par dancom5

PS, comment vous faite pour mettre en sous-briance dans le texte les termes .load et les autres pour éviter les balises code
pour éviter d'avoir un bloc quand on a juste un terme?

Il faut utiliser la balise CODEinline

Un exemple pour avoir cette ligne,
l’appel à $(document).ready() se trouve à l’intérieur de ta fonction do_ajax.

La rédaction de cette ligne sera,
l’appel à[CODEinline] $(document).ready()[/CODEinline] se trouve à l’intérieur de ta fonction[CODEinline] do_ajax[/CODEinline].
16/12/2017, 14h46
dancom5

Merci pour vos aides.
Je vais marqué résolu mais je reste proche de ce topic.
17/12/2017, 13h13
Watilin
Citation:

Envoyé par dancom5

Mais j'ai pas bien compris votre premier paragraphe sur «load» par rapport à mon code à propos du selecteur et le conteneur.
Je comprends le fonctionnement du selecteur c'est l'emplacement et l'application dans mon code que je ne comprends pas.

Quand tu appelles .load(), par exemple :

Code:

$("#element").load("mon-url.php");

Si le script PHP renvoie du HTML contenant des balises <script>, ces scripts seront évalués dans la page courante. Ça peut poser des problèmes, par exemple si des variables sont redéclarées, leurs valeurs précédentes sont écrasées. Et si un script appelle setTimeout ou setInterval, le nouveau compteur ne remplace pas les compteurs présents : il s’y ajoute, et ça devient vite le chaos.

Supposons que le PHP renvoie ceci :
Code:

1 2 3 4 5 6 <div id="conteneur"> … </div> <script> … </script>
Si tu appelles .load() telle quelle, le script sera évalué. Mais si tu ajoutes un sélecteur,

Code:

$("#element").load("mon-url.php #conteneur");

seul l’élément #conteneur de la réponse sera injecté dans la page, et les scripts seront ignorés.

D’un point de vue plus global, je te déconseille de générer du code JS côté serveur. Certains se l’autorisent pour des fragments d’une ligne ou deux, mais personnellement je trouve que c’est une mauvaise idée. Entre autres raisons, parce que ça t’oblige à écrire « du code dans du code », du JS dans du PHP, et ça crée des risques d’erreur avec les séquences d’échappement (par exemple, il faut doubler les \) et les guillemets.
C’est toujours mieux quand le code client est servi dans un fichier statique.
17/12/2017, 13h49
dancom5

Citation:

Envoyé par Watilin

$("#element").load("mon-url.php #conteneur");

#conteneur qui serait situé dans le fichier newuser_ajax.php via un div par exemple.
newuser.php fait appel au contenu situé dans newuser_ajax.php, c'est bien cela?

Je vais lire la doc afin de mieux comprendre. Merci.