Ajax + Javascript + php

Version imprimable

Bonjour,

Mon bouton javascript appel une fonction javascript qui à l'intérieur de la fonction il y a de l'ajax et l'ajax appelle un fichier script php, et le fichier php écrit dans un fichier text.

Mon problème, tout fonctionne avec google chrome (chromium sous linux) la fonction ajax appelle le php qui écrit dans un fichier OK. par contre avec firefox le comportement change le résultat : la fonction ajax qui appelle un fichier script php n'écrit plus ou se ne déclenche plus.

Voici mon code

Les boutons :

Code:

1
2
3
4
5
<li><a href="javascript:callfunction('button Offre De Service');">Offre De Services</a></li>
 
et
 
<a href="javascript:callfunctions('connexionsecure','button Connection Secure');" class="bouton_rouge2">Connexion Sécurisée/Secure <img src="images/flecheblanchedroite.png" alt="flecheblanchedroite02" /></a>

Voici mon script javascript et ajax :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
 * Connexionsecure...
 */
function logbutton(id)
{
        // See logsecure.php
        // var VarJSCRIPT = 5;
        // $.get("logsecure.php", {VarPHP: VarJSCRIPT});
 
        var BCShttps = "";
        var ODShttps = "";
        var BCShttp = "";
        var ODShttp = "";
 
        BCShttps = "https Button Connection Secure";
        ODShttps = "https Button Offre De Service";
        BCShttp = "http Button Connection Secure";
        ODShttp = "http Button Offre De Service";
 
        if (window.location.protocol == "https:")
        {
                switch (id)
                {
                        case "button Connection Secure":
                                var req = new XMLHttpRequest();
                                req.open('POST', 'logbutton.php', true);
                                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                                var post = 'logbutton='+BCShttps; // post string
                                req.onreadystatechange = logmessages(BCShttps);
                                req.send(post);
                        break;
                        case "button Offre De Service":
                                var req = new XMLHttpRequest();
                                req.open('POST', 'logbutton.php', true);
                                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                                var post = 'logbutton='+ODShttps; // post string
                                req.onreadystatechange = logmessages(ODShttps);
                                req.send(post);
                        break;
                        default:
                }
        }
        else if (window.location.protocol == "http:")
        {
                switch (id)
                {
                        case "button Connection Secure":
                                var req = new XMLHttpRequest();
                                req.open('POST', 'logbutton.php', true);
                                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                                var post = 'logbutton='+BCShttp; // post string
                                req.onreadystatechange = logmessages(BCShttp);
                                req.send(post);
                        break;
                        case "button Offre De Service":
                                var req = new XMLHttpRequest();
                                req.open('POST', 'logbutton.php', true);
                                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                                var post = 'logbutton='+ODShttp; // post string
                                req.onreadystatechange = logmessages(ODShttp);
                                req.send(post);
                        break;
                        default:
                }
        }
}

Voici mon script PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
        $button = $_REQUEST['logbutton'];
        if (isset($button))
        {
                header("Expires: 0");
                header("Cache-Control: no-cache");
                header("Pragma: no-cache");
                $file_log=fopen("1234/logbutton.txt", "a+");        
                if($file_log == false) die("La cr�ation du fichier a �chou�");
                $date_log = date("d/m/Y H:i:s");
                $log = "Log Button --> " .$button. " " .$date_log."\r\n";
                fwrite($file_log, $log);
                fclose($file_log);
        }
        exit();
?>

Si quelqu'un a une idée

Cordialement

07/10/2020, 09h43
kevin254kl

Salut,

Que dit la console?
On utilise plutôt fetch maintenant https://developer.mozilla.org/fr/doc...g_Fetchhttp:// .
Quel est la version de firefox et chrome?
07/10/2020, 11h35
dcastellacci

Bonjour,

Alors je suis sur Ubuntu 20.04 et pour firefox version 80.0.1 et chrome version 85.0.4183.121

Pourriez-vous me montrer un petit example simple juste pour me guider avec fetch de mon exemple pour que je puisse comprendre ?

Cordialement

Bonjour,

Merci à kevin254kl qui m'a proposé de remplcer mon code ajax par de l'Ajax Fetch. Tout fonctionne sur chrome, et sur firefox j'ai 1 bouton sur 2 qui fonctionne sur firefox.

voici mon code :

Les boutons :

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
48
49
<body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <a href="index.php"><img src="images/caisse.png" alt="caisse01" /></a>
                        <a href="index.php" style="text-decoration: none; color: #181818;"><h1>Caisse</h1></a>
                    </div>
                    <h2>Français</h2>
                </div>
 
                <nav>
                    <ul>
                        <li class="deroule"><a href="#"><br /><br /><br />Français<span class="fleche"></span></a>
                        ... code ...    
                        <li><a href="fr_avis.php"><br /><br /><br />Les Avis</a></li>
                        <li><a href="fr_licence.php"><br /><br /><br />Licence</a></li>
                        <li class="deroule"><a href="#">Offre<br />De<br />Services/<br />Blog<span class="fleche"></span></a>
                            <ul>
                                <!-- KO <li><a href="fr_offre_de_services.php" onclick="javascript:logbutton('button Offre De Service');">Offre De Services</a></li> -->
                                <!-- Call the Functions callfunction(id_logbutton) in javascript file scriptjs.js -->
 
				CE BOUTON NE MARCHE PAS AVEC FETCH DANS FIREFOX...
 
                                <li><a href="javascript:callfunction('button Offre De Service');">Offre De Services</a></li>
                                <li><a href="fr_blog.php">Blog</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.php"><br /><br /><br />Contact</a></li>
                    </ul>
                    <br /><br />
                </nav>
                <script src="/scriptMenujs.js" type="text/javascript"></script>
 
            </header>
	<div id="banniere_image">
                <div id="banniere_description">
                    Le pont de San Francisco.
                    <!-- Call the Functions toggle(id) and logbutton(id); in javascript file scriptjs.js -->
                    <!-- KO <a href="javascript:toggle('connexionsecure');javascript:logbutton('button Connection Secure');" class="bouton_rouge2">Connexion Sécurisée/Secure <img src="images/flecheblanchedroite.png" alt="flecheblanchedroite02" /></a> -->
                    <!-- Call the Functions callfunctions(id_toggle,id_logbutton) in javascript file scriptjs.js -->
 
		    CE BOUTON MARCHE AVEC FETCH DANS FIREFOX...
 
		    <a href="javascript:callfunctions('connexionsecure','button Connection Secure');" class="bouton_rouge2">Connexion Sécurisée/Secure <img src="images/flecheblanchedroite.png" alt="flecheblanchedroite02" /></a>
                    <a href="javascript:toggle('systemcaisse');" class="bouton_rouge">Système Caisse <img src="images/flecheblanchedroite.png" alt="flecheblanchedroite02" /></a>                           
                </div>
            </div>
        </div>

Voici mon script javascript et ajax fetch:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/**
 * Connexionsecure...
 */
function logbutton(id)
{
	// See logsecure.php
	// var VarJSCRIPT = 5;
	// $.get("logsecure.php", {VarPHP: VarJSCRIPT});	
 
	var BCShttps = "";
	var ODShttps = "";
	var BCShttp = "";
	var ODShttp = "";
 
	BCShttps = "https Button Connection Secure";
	ODShttps = "https Button Offre De Service";
	BCShttp = "http Button Connection Secure";
	ODShttp = "http Button Offre De Service";		
 
	if (window.location.protocol == "https:")
	{
		switch (id)
		{
			case "button Connection Secure":				
				fetch("logbutton.php", {
					method: "POST",
					headers: {"Accept": "application/json","Content-Type": "application/json"},					
					body: JSON.stringify( {logbutton: BCShttps} )
				})
				.then(commits => logmessages(BCShttps));
			break;
 
			case "button Offre De Service":				
				fetch("logbutton.php", {
					method: "POST",
					headers: {"Accept": "application/json","Content-Type": "application/json"},					
					body: JSON.stringify( {logbutton: ODShttps} )
				})
				.then(commits => logmessages(ODShttps));
			break;
 
			default:
		}			
	}
	else if (window.location.protocol == "http:")
	{		
		switch (id)
		{
			case "button Connection Secure":
				fetch("logbutton.php", {
					method: "POST",
					headers: {"Accept": "application/json","Content-Type": "application/json"},					
					body: JSON.stringify( {logbutton: BCShttp} )
				})
				.then(commits => logmessages(BCShttp));				
			break;
 
			case "button Offre De Service":				
				fetch("logbutton.php", {
					method: "POST",
					headers: {"Accept": "application/json","Content-Type": "application/json"},					
					body: JSON.stringify( {logbutton: ODShttp} )
				})
				.then(commits => logmessages(ODShttp));				
			break;
 
			default:
		}
	}
}

Voici mon script PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php   
        $button = json_decode(stripslashes(file_get_contents("php://input")), true);    
        if (isset($button))
        {
                header("Expires: 0");
                header("Cache-Control: no-cache");      
                header("Pragma: no-cache");     
                $file_log=fopen("1234/logbutton.txt", "a+");        
                if($file_log == false) die("La création du fichier a échoué");
                $date_log = date("d/m/Y H:i:s");        
                $log = "Log Button --> " .$button["logbutton"]. " " .$date_log."\r\n";  
                fwrite($file_log, $log);
                fclose($file_log);
        }
        exit();
?>

Si quelqu'un a une idée

Cordialement

07/10/2020, 18h58
kevin254kl

Quel est le soucis?
Si tes variables sont en post utilise $_POST plutôt que file_get_content!
07/10/2020, 19h17
dcastellacci

Le problème est dans firefox. J'ai un bouton qui ne marche pas, je ne sais pas pourquoi. Tout marche avec chrome, les deux boutons. Dans la desciption "les boutons" j'ai noté en majuscule le bouton qui ne marche pas.

Le code dans javascript fetch marche trés bien avec chrome, et firefox j'ai 1 bouton sur 2 qui marche, sachant que j'ai le même code javascript fetch pour les deux boutons.

Mystère. :-/

Cordialement
08/10/2020, 16h51
dcastellacci
Bonjour,

J'ai trouvé pourquoi le 2émes boutons ne marche pas.

Voici mon exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function callfunction(id_logbutton) { logbutton(id_logbutton); callocate(); } function callocate() { window.location.href = "fr_offre_de_services.php"; }
Le 2émes boutons ne marchent pas parceque je fais un window.location.href après la fonction logbutton. Si je fais window.location.href avant logbutton ca marche à moitié.
J'écris dans 2 fichiers txt 1 fichier sera écrit l'autre non. Donc c'est pas bon.

Voici mon problème

Comment appeler, charger, une page php, et en même temps, appeler une fonction?
L'ordre d'exécution n'est pas important du moment que ça s'exécute (chargement de la page et écriture dans les deux fichiers).

Si vous avez une idée elle est la bienvenue :-)

Cordialement
08/10/2020, 19h51
kevin254kl

fetch est asynchrone c'est l'intérêt d'ailleurs.
Pour changer le comportement https://developer.mozilla.org/en-US/...perators/await il-y a await qui va spécifier attends un retour puis continue les instructions.

Bonjour,

Merci à kevin254kl pour ses propositions pertinentes!

J'ai ajouté la fonction await dans mon code et en locale sur mon serveur de dev tout marche zero erreur dans ma console aussi bien sur firefox que chrome.

parcontre le problème persiste sur le serveur de prod un bouton sur 2 marche.

je précise que sur la prod je suis sur Ubuntu 18.04.5 et apache2 2.4.29
alors que sur le serveur de dev je suis en Ubuntu 20.04.1 et apache2 2.4.41

Peut-être que le problème viendrait-il de là Mystère :-/

Voici mon code modifier :

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
else if (window.location.protocol == "http:")
        {
 
                if (id == "button Connection Secure")
                {
                        const resp = await fetch("logbutton.php", {
                                method: "POST",
                                headers: {"Accept": "application/json","Content-Type": "application/json"},
                                body: JSON.stringify( {"logbutton": BCShttp} )
                        });
                        const validOK = await resp.ok;
                        return logbutton().then(validOK => {*logmessages(BCShttp); });
 
                }
 
                if (id == "button Offre De Service")
                {
                        const resp = await fetch("logbutton.php", {
                                method: "POST",
                                headers: {"Accept": "application/json","Content-Type": "application/json"},
                                body: JSON.stringify( {"logbutton": ODShttp} )
                        });
                        const validOK = await resp.ok;
                        return logbutton().then(validOK => { logmessages(ODShttp); });
 
                }
        }

Si vous avez des remarques ou des propositions je suis preneur!

Cordialement

09/10/2020, 20h40
kevin254kl

Le code est côté front le serveur n'a rien à voir.
Si tu ouvre la console google ou firefox avec f11 tu peux voir dans network le call http de ton fichier php, tu peux aussi voir en console les éventuels soucis.
J' aurais posé des console.log partout et analyser le soucis, la console pour comprendre.
Sans plus d'information difficile d'aider :)

Bonjour,

Merci kevin254kl Je pense avoir compris le probème.

En faite quand je clique sur le bouton j'appelle une function javascript qui execute deux instructions.

la première instruction fait un window.location.href = file.php dans une function callocate(); puis la seconde instruction appelle une fonction logbutton(id_logbutton); javascript qui écrit dans un fichier text.

quand je commente l'instruction //window.location.href = file.php et que la second instruction appelle la fonction javascript qui écrit dans un fichier text. ça marche graçe à window.location.href commenté. Ca marche sur mon serveur DEV et mon serveur PROD. Aucun problème de code Fetch et Await

Si j'enlève le commentaire et que la première instruction fait un window.location.href = file.php puis la seconde instruction appelle une fonction javascript qui écrit dans un fichier text. La fonction javascript qui écrit dans un fichier text ne marche pas.

Voici un exermple de mon code :

fichier script nom: scriptjs.php

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function callfunction(id_logbutton) 
{
        //callocate();
        logbutton(id_logbutton);
 
}
 
function callocate()
{
        //KO
        //window.location.assign("fr_offre_de_services.php");
        window.location.href = "fr_offre_de_services.php";
        //window.open("fr_offre_de_services.php","_self");
        //OK
        //window.open("fr_offre_de_services.php","_blank");
 
}
 
async function logbutton(id)
{
        // See logsecure.php
        // var VarJSCRIPT = 5;
        // $.get("logsecure.php", {VarPHP: VarJSCRIPT});
 
        var BCShttps = "";
        var ODShttps = "";
        var BCShttp = "";
        var ODShttp = "";
 
        BCShttps = "https Button Connection Secure";
        ODShttps = "https Button Offre De Service";
        BCShttp = "http Button Connection Secure";
        ODShttp = "http Button Offre De Service";
 
        if (window.location.protocol == "http:")
        {
		CA CA MARCHE avec window.location.href
                if (id == "button Offre De Service")
                {
                        const resp = await fetch("logbutton.php", {
                                method: "POST",
                                headers: {"Accept": "application/json","Content-Type": "application/json"},                                -
                                body: JSON.stringify( {"logbutton": ODShttp} )
                        });
                        const validOK = await resp.ok;
                        return logbutton().then(validOK => { logmessages(ODShttp); });
 
                }
        }
}
 
CA CA NE MARCHE PAS avec window.location.href
async function logmessages(id_logm)
{
        const resp = await fetch("scriptjs.php", {
                method: "POST",
                headers: {"Accept": "application/json","Content-Type": "application/json"},
                body: JSON.stringify( {"logmessages": id_logm} )
        });
 
        <?php 
                $logmessage = json_decode(stripslashes(file_get_contents("php://input")), true);
                if (isset($logmessage)) file_put_contents("1234/logmessages.txt", "Log Button --> " .$logmessage["logmessages"]. " " .date("
d/m/Y H:i:s") ."\r\n", FILE_APPEND);
        ?>
}

Cordialement

10/10/2020, 18h40
dcastellacci

REBonjour,

Pour la console j'ai un problème quand le clique sur le bouton je suis sur la page index.php et l'exécution du clique me charge une autre page php.

comment voir les console.log de la page index alors que le click me charge une autre page php dans son exécution? :-/

Cordialement
10/10/2020, 19h18
kevin254kl

Le soucis vient de

Code:

window.location.href

ici il-y a une redirection ce qui veut dire qu'a ce moment le javascript s'arrête et charge le javascript de la redirection. Donc normalement cette redirection doit venir à la fin des traitements.
10/10/2020, 20h25
dcastellacci

Bonsoir kevin254kl

Merci pour ton aide graçe à toi j'ai pu entrevoir la solution.

Alors la solution n'est pas très esthétique mais elle remplie son rôle.

j'ai ajouté un setTimeout de 1 sec pour laisser le temps au javascrpt de se dérouler et ensuite je fais un window.location.

Zéro modification de code grace au setTimeout.

En te remerciant

Cordialement

PS : si il n'y a pas de changement, la semaine prochaine je mets le ticket comme résolue
11/10/2020, 00h20
kevin254kl

De mon point de vue c'est une mauvaise idée. Si un jour l’exécution prend plus de 1 seconde tu auras la redirection, en plus difficile à déboguer.
Pourquoi ne pas mettre la redirection à la fin et utiliser le await pour attendre le retour du fetch?
11/10/2020, 12h09
dcastellacci

Bonjour kevin254kl

J'ai suivi ton conseil j'ai gardé les await, les fetch, et mis mon window.location à la fin de mon code. tout fonctionne en DEV comme en PROD, je suis super content, plus besoin de setTimeout. Un grand merci kevin254kl.

Je vais classé le ticket comme résolue semaine prochaine.

Cordialement :-)