Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Ajax + Javascript + php


Sujet :

AJAX

  1. #1
    Futur Membre du Club
    Ajax + Javascript + php
    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&#65533;ation du fichier a &#65533;chou&#65533;");
                    $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

  2. #2
    Membre chevronné
    Salut,

    Que dit la console?
    On utilise plutôt fetch maintenant https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetchhttp:// .
    Quel est la version de firefox et chrome?

  3. #3
    Futur Membre du Club
    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

  4. #4
    Futur Membre du Club
    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

  5. #5
    Membre chevronné
    Quel est le soucis?
    Si tes variables sont en post utilise $_POST plutôt que file_get_content!

  6. #6
    Futur Membre du Club
    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

  7. #7
    Futur Membre du Club
    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

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

  9. #9
    Futur Membre du Club
    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

  10. #10
    Membre chevronné
    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

  11. #11
    Futur Membre du Club
    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

  12. #12
    Futur Membre du Club
    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

  13. #13
    Membre chevronné
    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.

  14. #14
    Futur Membre du Club
    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

  15. #15
    Membre chevronné
    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?

  16. #16
    Futur Membre du Club
    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 :-)

###raw>template_hook.ano_emploi###