Discussion :

[dcastellacci]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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?

[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

[dcastellacci]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[kevin254kl]

Quel est le soucis?
Si tes variables sont en post utilise $_POST plutôt que file_get_content!

[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

[dcastellacci]

Bonjour,

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

Voici mon exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[dcastellacci]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[dcastellacci]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[kevin254kl]

Le soucis vient de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[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?

[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 :-)