Enregistrement de données en BDD avec AJAX et l'API Page Visibility

Version imprimable

Bonjour,
J'ai un gros problème avec mon code car il est censé vérifier la présence de l'utilisateur sur une page et par la même occasion d'envoyé à une page PHP une donnée pour que PHP l'inscrive dans la base de données. Donc si l'utilisateur consulte la page l'API Page Visibility envoie un signal qui déclenche l'envoi d'une information ici 1 via AJAX vers la page PHP et idem quand l'utilisateur ne consulte pas la page sauf qu'au lieu d'envoyé 1 ont envoi 0. Mais dans mon cas cela ne fonctionne pas avec AJAX car sans AJAX je faisais une redirection en js vers ma page PHP qui redirigeait vers la page précédente de l'utilisateur sauf qu'en redirigent l'API pensait que l'utilisateur consultait la page ce qui n'était donc pas fiable donc en ajax j'essai de faire le même boulot sans redirection. Car mon site affiche que l'utilisateur est connecté si 1 est dans la BDD et si 0 est dans la BDD alors il affiche qu'il est déconnecté.

Le code :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
 
    (function() {
        'use strict';
 
        // Set the name of the "hidden" property and the change event for visibility
        var hidden, visibilityChange; 
        if (typeof document.hidden !== "undefined") {
          hidden = "hidden";
          visibilityChange = "visibilitychange";
        } else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
          hidden = "mozHidden";
          visibilityChange = "mozvisibilitychange";
        } else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
          hidden = "webkitHidden";
          visibilityChange = "webkitvisibilitychange";
        }
 
        // If the page is hidden, ;
        // if the page is shown, 
        function handleVisibilityChange() {
          if (document[hidden]) {
            var state0 = 0;
            var state1 = 1;
            $.ajax({ // A PARTIR DE LA CA BUG!
       url : 'user_connect.php', // La ressource ciblée
       type : 'GET', // Le type de la requête HTTP.
       data : 'state=' + state0;
    });
          } else {
            $.ajax({
       url : 'user_connect.php', // La ressource ciblée
       type : 'GET', // Le type de la requête HTTP. 
       data : 'state=' + state1;
    });
          }
        }
 
        // Warn if the browser doesn't support addEventListener or the Page Visibility API
        if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
          alert("This website requires a modern browser that supports the Page Visibility API.");
        } else {
          // Handle page visibility change   
          document.addEventListener(visibilityChange, handleVisibilityChange, false);
        }
 
    })();</script>

Merci d'avance pour votre aide ;)

Bonjour ArzelPRO,

Peut-être ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function handleVisibilityChange() {
    var state0 = 0;
    var state1 = 1;
 
    if (document[hidden]) {
        $.ajax({ // A PARTIR DE LA CA BUG!
           url : 'user_connect.php', // La ressource ciblée
           type: 'GET', // Le type de la requête HTTP.
           data: 'state=' + state0;
        });
    } else {
        $.ajax({
            url : 'user_connect.php', // La ressource ciblée
            type: 'GET', // Le type de la requête HTTP. 
            data: 'state=' + state1;
        });
    }
}

25/04/2017, 21h30
ArzelPRO

Sa ne fonctionne pas :calim2:
25/04/2017, 21h51
Kennel sébastien

Hum, il faut peut-être chercher de quel coter ça ne passe pas. Test des « alert » pour voir que le code Javascript passe bien partout en premier temps.

Sinon les deux variables ne sont pas nécessaire en fait…

Je viens de tester ça et ça ne marche malheureusement pas :calim2:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function handleVisibilityChange() {
    var state0 = 0;
    var state1 = 1;
 
    if (document[hidden]) {
        $.ajax({ // A PARTIR DE LA CA BUG!
           url : 'user_connect.php', // La ressource ciblée
           type: 'GET', // Le type de la requête HTTP.
           data: 'state=' + state0;
        });
        alert("Non connecté!!");
    } else {
        $.ajax({
            url : 'user_connect.php', // La ressource ciblée
            type: 'GET', // Le type de la requête HTTP. 
            data: 'state=' + state1;
        });
        alert("Connecté!");
    }
})

Et faire sans les variables je ne vois pas comment ?

Donc ton événement est surement pas déclenché…

Ça donne quoi ceci ? :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function handleVisibilityChange() {
    alert('Événement déclenché !');
 
    if (document[hidden]) {
        $.ajax({ // A PARTIR DE LA CA BUG!
           url : 'user_connect.php', // La ressource ciblée
           type: 'GET', // Le type de la requête HTTP.
           data: 'state=0';
        });
    } else {
        $.ajax({
            url : 'user_connect.php', // La ressource ciblée
            type: 'GET', // Le type de la requête HTTP. 
            data: 'state=1';
        });
    }
})

25/04/2017, 22h17
ArzelPRO

Rien ne se passe et le statut est toujours connecté!

Il y a une autre erreur…

Ceci devrai passer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function handleVisibilityChange() { 
    if (document[hidden]) {
        $.ajax({ // A PARTIR DE LA CA BUG!
           url : 'user_connect.php', // La ressource ciblée
           type: 'GET', // Le type de la requête HTTP.
           data: 'state=0'
        });
    } else {
        $.ajax({
            url : 'user_connect.php', // La ressource ciblée
            type: 'GET', // Le type de la requête HTTP. 
            data: 'state=1'
        });
    }
})

25/04/2017, 22h35
ArzelPRO

Toujours pas :(

Reviens en arrière… Test de nouveau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function handleVisibilityChange() {
    alert('Événement déclenché !');
 
    if (document[hidden]) {
        $.ajax({ // A PARTIR DE LA CA BUG!
           url : 'user_connect.php', // La ressource ciblée
           type: 'GET', // Le type de la requête HTTP.
           data: 'state=0'
        });
    } else {
        $.ajax({
            url : 'user_connect.php', // La ressource ciblée
            type: 'GET', // Le type de la requête HTTP. 
            data: 'state=1'
        });
    }
})

L'alerte se déclenche ?

Tu as bien importer ta bibliothèque ? La variable « $ » est bien défini ?

25/04/2017, 22h52
ArzelPRO

L'alerte ne se déclenche pas, ma bibliothèque est bien importée et la variable $ n'est pas défini car je ne sais pas comment la définir je pensais que c'était comme dans le code fournis tout simplement.
25/04/2017, 23h00
Kennel sébastien

Si « $ » renvoi « undefined » normal que ça ne marche pas.

Lit la doc de ta bibliothèque.
25/04/2017, 23h07
Kennel sébastien

T'as bibliothèque « jQuery » est importée dans ta page ?

Comme ceci :

Code:

1
2
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

25/04/2017, 23h18
Kennel sébastien

J'ai testé pour voir et les alertes passent.

Donc ton problème est surement lié au niveau du serveur

Quand tu compares la valeur de ta BDD et celle en paramètre de la page c'est bien les mêmes types ?

Tu les as converti en entier avec « (int) » ?
25/04/2017, 23h20
ArzelPRO

En php je fait une requête $_GET['']; et je ne vois pas ce que tu veut dire par convertir en entier avec int que dois-je convertir ?
25/04/2017, 23h49
Kennel sébastien

Ton paramètre est une chaine de caractère, pas forcément la valeur de ton champ de table…

Code:

$state = (int) $_GET['state'];
25/04/2017, 23h50
ArzelPRO

Donc je dois convertir en int ce que je GET avec php cela est du à AJAX ?
25/04/2017, 23h58
Kennel sébastien

Ajax, ce n'est qu'une requête d'arrière plan…

Mais je pense que ton problème vient du coter serveur

Si tu récupères la réponse d'Ajax du serveur, c'est quoi le message retourné ?
25/04/2017, 23h59
ArzelPRO

Rien
26/04/2017, 00h20
Kennel sébastien

S'il renvoi pas d'erreur de syntaxe non plus du coter serveur comme tu le sous-entends, alors c'est que tu as une faute dans ton code.

Pour ce qui est du coter client c'est corrigé ;-).

Faut que tu vois maintenant avec les personnes de PHP.
26/04/2017, 00h25
ArzelPRO

Mais c'est étonnant quand même car avant que je l'ai dis dans mon premier post j'arrivais à moitié puisque lorsque l'API détectait le changement d'onglet du navigateur elle faisait la redirection vers ma page PHP avec les paramètres d'url php insérait donc la bonne donnée en BDD ce qui m'affichait bien le statut déconnecté mais cela dans un temps trop court car pour ne pas rester coincé sur la page PHP j'ai demandé à PHP de revenir en arrière une fois la donnée envoyé en BDD mais ça n'a pas plus à l'API qui croyait du coup suite à la redirection de PHP, que l'utilisateur consultait la page :?
26/04/2017, 00h27
ArzelPRO

Puis-je rajouter une 2ème variable a envoyé en AJAX ?
26/04/2017, 00h37
ArzelPRO

Est ce que c'est bon si je met ça :

Code:

data: 'state=0'+'&id=<?php echo $_SESSION['id']; ?>'

???
26/04/2017, 00h44
Kennel sébastien
Tu peux tester ta page PHP directement sans utiliser Ajax, colle juste dans le navigateur :
Code:

1 2 user_connect.php?state=0 user_connect.php?state=1
Tu verras bien s'il fait le traitement correctement

En tout cas il n'y a plus d'erreur de syntaxe en JS.
26/04/2017, 00h46
ArzelPRO

Aucune erreur s'affiche et sa fonctionne
26/04/2017, 00h50
Kennel sébastien

Dans ce cas, ce que tu as coder en JS n'est pas pas juste pour ce que tu attends. Cependant la fonction « handleVisibilityChange » se déclenche bien, donc ta condition est peut-être pas la bonne ?
26/04/2017, 00h53
ArzelPRO

Moi l'alerte ne s'affiche pas et tout semble ok en ajax c'est la 1ere fois que je bug autant sur du code :?
26/04/2017, 00h56
ArzelPRO

Après avoir enlevé une parenthèse a la 3ème accolade après le else l'alerte s'affiche bizarrement
26/04/2017, 00h58
ArzelPRO

Ca y est sa marche c'était bien la parenthèse en trop! :D
26/04/2017, 00h59
ArzelPRO

Merci beaucoup pour ton aide et le temps que tu y a passé ;-)