Partage
  • Partager sur Facebook
  • Partager sur Twitter

Rafraichir page web sans perdre contenu de input

    18 juin 2018 à 23:18:46

    Bonjour à tous.

    Voila, je vous contacte car tout est dans le titre.

    J'ai un input ou j’écris un message, suivi d'un boucle qui affiche tous les messages d'une table en base de donnée. Et je souhaiterais mettre à jour la page toutes les 5 secondes sans perdre le message qui est en train d’être écris dans le input.

    Donc j'ai déjà regardé quelques solutions mais qui ne me plaisent pas, style ajax et tout (j'ai jamais utilisé ajax et je suis à 1000 lieu de le développer de façon sécure).

    J'ai aussi regardé les Iframe, mais ca ne me convient pas car cela appel une page web externe.

    J'ai un input comme ceci:

    <input type="text" name="msg" placeholder="message" id="msg">
    
    #puis la boucle qui affiche les messages
    
    <div id="loop">
    
    <?php
    
    While ($lines...)
    
    {
    
     echo $line;
    
    }
    
    ?>
    
    </div>


    J'ai plusieurs possibilités de refresh:

    <META http-equiv="refresh" content="5; URL=mapage.php">

    ou en php

    header("Refresh: 5; url=$page");


    Mais donc à chaque fois ça efface le contenu du input.

    Idéalement j'aimerais pouvoir rafraîchir juste le contenue du div, d'une façon ou d'une autre.

    Encore plus idéalement, si ca pouvais se faire en html/php/javascript ca serait génial :)


    Voila, c'est tout. Donc si vous avez quelques idées à pouvoir m'apporter la dessus ça me serait franchement utile.

    Je vous remercie d'avance et vous souhaite une agreable soirée :)


    • Partager sur Facebook
    • Partager sur Twitter

    Find various resources, tuturials and online tools at: https://finseckto.com

      20 juin 2018 à 18:04:58

      Je pense pas que ça soit réellement possible sans ajax, si j'ai bien compris tu veux que toute les secondes ça récupère le contenu de la base de donnée et que ça le ré-affiche et le tout sans refresh la page?

      Si c'est bien ça je voit pas comment le faire sans ajax :/

      • Partager sur Facebook
      • Partager sur Twitter
        20 juin 2018 à 20:19:44

        Bonjour,

        Oui c'est possible sans ajax grâce au localStorage apparu en HTML5. Juste, ne stocke pas des informations sécurisées comme un mot de passe ou code de carte bleue, etc..

        • Partager sur Facebook
        • Partager sur Twitter
          20 juin 2018 à 21:22:07

          Hello,

          Pour le localStorage, c'est pas compliqué même si tu connais peu le JS :

          -> https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html 

          Par j'insiste sur les recommandations de me_moi, c'est essentiel puisque côté client.

          "Juste, ne stocke pas des informations sécurisées comme un mot de passe ou code de carte bleue, etc.."

          -
          Edité par Lucky13 20 juin 2018 à 21:23:27

          • Partager sur Facebook
          • Partager sur Twitter
            20 juin 2018 à 23:06:47

            Hmmm merci beaucoup pour vos réponses.J'ai étudié les compromis avec attention.

            Malheureusement le localstorage me convient encore moins (pour les problèmes liés aux infos sensibles justement eheh)...

            finalement je me suis penché sur ajax, mais l'AJAX semble me faire une réaction étrange.

            mapage.php


            <html><head><title>RadisAModifier</title></head>
            
            <body>

            <input type=
            "text" name="msg" placeholder="message" id="msg">

            <div id="mydiv"> <script> document.title = "new";</script> </div>

            <script> document.title = "old";</script> <script> setInterval(function(){ $('#mydiv').load("mapage.php #mydiv"); }, 2000) /* time in milliseconds (ie 2 seconds)*/ </script> </body></html>

            Et donc ce code va me changer le titre de la page en "old", et ce que je cherche c'est modifier le titre en rafraîchissant le div "mydiv" toute les 2 secondes.

            Donc ça devrait m'afficher "new" dans le titre de l'onglet. Mais ça ne le fait pas, et ça reste sur "old" ça ne met pas à jour le titre.

            Vous pourriez pas m'aider à comprendre par hasard et pouvoir mettre à jour dynamiquement ce titre svp? :)

            PS: Je sais que l'exemple peux paraître un peu bébête mais j'ai simplifié pour mieux situer le problème.

            Merci d'avance.

            Des suggestions?

            -
            Edité par petitradisgris 20 juin 2018 à 23:08:08

            • Partager sur Facebook
            • Partager sur Twitter

            Find various resources, tuturials and online tools at: https://finseckto.com

              20 juin 2018 à 23:33:51

              Donc la tu es parti sur :

              Toutes les 2 secondes j'exécute une requête Ajax qui exécute un script PHP qui interroge et récupère les données stockées dans une table suivant un critère, puis tu injectes/rafraichis cette phrase dans un élément HTML.

              Ou est le souci, en faisant ceci le contenu du champ input n'est pas impacté...

              Par contre un appel au serveur toutes les 2 secondes demande d'avoir un hébergement non mutualisé... juste pour info.

              ps: du coup tu n'es plus dans le bon forum, il faut changer en demandant un déplacement...

              -
              Edité par Lucky13 20 juin 2018 à 23:36:44

              • Partager sur Facebook
              • Partager sur Twitter
                21 juin 2018 à 8:34:35

                Bonjour,

                Mauvais forum

                Le sujet est déplacé dans le forum approprié : Javascript

                • Partager sur Facebook
                • Partager sur Twitter
                  21 juin 2018 à 14:58:45

                  Bonjour,

                  Je pense que au niveau design de ton application aller chercher toute ta page html pour en extraire un script JS puis l'executer c'est pas le top.

                  C'est pas trés beau mais tu à le droit d'utiliser la fonction eval() en JS

                  $.ajax({
                     url : 'page.php', // La ressource ciblée
                     type : 'GET', // Le type de la requête HTTP.
                     success : function(code_html, statut){
                        let code_js = $(code_html).find("div#mydiv');
                        eval(code_js); // On execute le code JS
                        // ajax réussi
                     },
                     error : function(resultat, statut, erreur){
                        // Oups une erreur   
                     },
                     complete : function(resultat, statut){
                        // réussi ou pas on execute ce bout de code aprés l'appel
                     }
                   });

                  Sinon tu peux créer une page/route PHP qui te renvoie juste le nouveau titre de la page, ça évite du traitement côté serveur et JS 

                  $.ajax({
                     url : 'nouveauTitre.php', // La ressource ciblée
                     type : 'GET', // Le type de la requête HTTP.
                     success : function(response, statut){
                       document.title = response;
                     }
                   });




                  • Partager sur Facebook
                  • Partager sur Twitter
                    21 juin 2018 à 16:00:05

                    Est-ce que tu pourrais pas utiliser des cookies pour stocker le message ? Par contre je pense que tu pourras le faire que avec de l'ajax (mais c'est une requete vrm très simple vers un fichier php).

                    En gros au refresh de la page en php tu verifie si le cookie existe : 

                    • Si oui  tu charges la donnée dans le champs message
                    • Si non tu charges le champs message vide

                    Ensuite tu a en html

                    <input type="text" name="message" onchange="updateCookie()"/>

                    Code de updateCookie : 

                    $.ajax({
                       url : 'saveCookie.php',
                       type : 'POST',
                       data : {
                          "message" : document.getElementsByName('message')[0].value;
                       }
                     });

                    du coté saveCoockie.php

                    <?php
                    
                    if(isset($_POST['message'])){
                       setCookie("messageCookie", $_POST['message']);
                    }

                    et pour le recupérer dans ta page principale : 

                    <?php
                    
                    if(isset($_COOKIE['message'])){
                    echo '<input type="text" name="message" value="'.$_COOKIE['message'].'" onChange="updateCookie()"> 
                    }
                    else {
                    echo '<input type="text" name="message" placeholder="your message" onChange="updateCookie()"> 
                    }



                    • Partager sur Facebook
                    • Partager sur Twitter
                      21 juin 2018 à 16:21:54

                      Lucky13 a écrit:

                      [...]

                      Par contre un appel au serveur toutes les 2 secondes demande d'avoir un hébergement non mutualisé... juste pour info.

                      [...]

                      -
                      Edité par Lucky13 il y a environ 16 heures

                      Pour ma culture perso, je voudrais que tu m'expliques ce point please. Tu penses qu'un appel serveur régulier à 2 secondes peut planter un mutu ? Je demande juste car pour ma part, je ne vois pas où se situe le problème ... Enfin, je vois bien un soucis pointer le bout de son nez : une DB mal architecturée, des tables non optimisées, et des requêtes trop larges. Mais ce sont des choses qui se règlent (réfléchissent en amont aussi, je te l'accorde). Si tu as d'autres éléments en cause, je suis preneur, ça m'intéresse (pour opti mon application) :D

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Kwo:re / topic OC | Aidez les autres, indiquez un sujet résolu ! | Vous êtes bloqué ? Suivez le guide ! | N'aide pas par MP
                        21 juin 2018 à 16:35:06

                        Hello Ealon,

                        Ce n'est pas une question technique, juste les hébergeurs génériques qui se donnent le droit de bloquer ton site si celui-ci monopolise trop le serveur. C'est souvent indiqué dans leur CGU, ne pas choisir du mutualisé pour faire un chat, etc...

                        Donc un appel au serveur toutes les 2 secondes pour quelqu'un qui paie 2 ou 5€ en mutualisé ne les intéresse pas trop ^^

                        • Partager sur Facebook
                        • Partager sur Twitter
                          21 juin 2018 à 16:44:12

                          Hey merci de la précision Lucky !

                          A vrai dire, je n'ai jamais vraiment lu ces CGU ...:honte:

                          Je partais plus du principe que sur mon mutu, j'avais un trafic illimité, du coup tant pis. Concrètement, ce qui m'intéresse le plus aujourd'hui dans l'hébergement c'est surtout les BDD (accès et taille). Llà je sais que les connexions peuvent être limitées, et des architectures foirées associées à des codes et des requêtes lourdes peuvent poser problème, d'où ma question initiale.

                          Mais c'est vrai que prendre 2€ par mois pour se faire plomber un serveur, c'est quand même moyen !

                          Je clos mon HS.

                          Merci encore.

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Kwo:re / topic OC | Aidez les autres, indiquez un sujet résolu ! | Vous êtes bloqué ? Suivez le guide ! | N'aide pas par MP
                            21 juin 2018 à 16:48:27

                            Le mieux est de lire les CGU en effet, ça m'est arrivé chez 1&1, j'avais fait un chat en PHP pour essayer en apprentissage et j'ai reçu un mail d'avertissement me proposant gentillement d'upgrader mon abonnement vers un dédié ^^ 

                            Peut -être que d'autres l’accepte mais j'en doute, un vps me semble être le minimum...

                            -
                            Edité par Lucky13 21 juin 2018 à 16:48:42

                            • Partager sur Facebook
                            • Partager sur Twitter
                              21 juin 2018 à 16:52:04

                              Effectivement, je viens de lire ...

                              "Par conséquent, si les hébergements mutualisés de l'Usager utilisent en moyenne plus de 5% des ressources techniques totales, ONLINE pourra suspendre les Services de l'Usager pour préserver la qualité de service des autres utilisateurs." - CGV Online Mutualisé

                              Après, c'est quand même difficile de juger, n'ayant, nous, pas accès aux outils de monitoring du hardware chez eux ... M'enfin, je leur fait confiance pour ne pas oublier d'envoyer des mails à ce sujet ^^

                              -
                              Edité par Ealon 21 juin 2018 à 16:52:20

                              • Partager sur Facebook
                              • Partager sur Twitter
                              Kwo:re / topic OC | Aidez les autres, indiquez un sujet résolu ! | Vous êtes bloqué ? Suivez le guide ! | N'aide pas par MP
                                21 juin 2018 à 19:18:44

                                En même temps c'est du bon sens, si tu les mutualisés font des chat, ça va vite saturer ou augmenter les temps de chargement de nos sites...

                                Un peu comme quand tu achètes une voiture, tu la prend selon tes critères d'utilisation.

                                Mais faut-il encore le savoir, une info plus claire et dispo serait la bien venue de leur part :) 

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  22 juin 2018 à 21:23:02

                                  Re-bonjour à tous! et merci pour toutes ces informations.

                                  je vais 1) essayer de vous répondre sans oublier personne 2) essayer de mieux expliquer mon problème (en tout cas où j'en suis puisque ma situation à évoluée entre le début de l'article et maintenant. et 3) espérer que vous allez pouvoir m'aider. :)

                                  -Donc oui pas de problème j'ai mon vps+ip+nom de domaine donc à ce niveau là je fais ce que je veux je suis pas bloqué par une restriction de mutualisée (utile aussi si on souhaite éviter un DOS d'ailleur) bref..

                                  -J'ai à peine lâché un bout de code vous avez déjà compris que c'est un chat, GG à vous ;)

                                  Je cherche à faire une page, où j'ai un champ input qui ne se met pas à jour dynamiquement (seulement au click d'un bouton par exemple)., ensuite j'ai une zone (un div) qui contient des appels en BDD , de messages par exemple, et je veux que ça se mette à jour dynamiquement (toutes les 2 secondes il me ré-affiche toute la BDD quoi).

                                  L’intérêt de faire ça, c'est que ça met à jour le contenu de la base de donnée sans que je perde ce que je suis en train d'écrire dans le input.

                                  (Fufurulas: j'ai pas très bien compris ton exemple mais j'ai l'impression que tu me fait faire un GET donc un rechargement complet de la page, donc je perd le contenu du input non?)

                                  (phenixxosburn: pareil, et en plus je préférerais éviter les cookies car je les ai désactivé pour durcir mon php. Je souhaiterais donc ne pas utiliser de cookie, et pas m’embêter non plus avec les espèces de législation sur les cookie.)

                                  Bref quand j’arrive à faire tout ça, je veux que le titre de la page (dans le head) se modifie en fonction du dernier message genre (ou du premier).

                                  Et c'est ce dernier petit point qui pêche, car quand je load juste mon div dans le setinterval, et que dans le div il y a un document.title qui traîne, ça ne met pas à jour le titre! et je suis obligé de rafraîchir toute la page pour que le titre change.

                                  (vous l'aurez compris, ça ressemble étrangement à ce que faceb.. fait avec la messagerie, mais je ne plagie pas je promet monsieur l'agent XD).

                                  Voila sur quoi je bloque. Donc je ne bloque plus sur le fait de rafraîchir juste le div, mais de rafraîchir le titre sans rafraîchir la page entière.

                                  Et voici mon code:

                                  mapage.php

                                  <input id="msg">
                                  
                                  <div id="refreshed">
                                  
                                  <?php
                                   //bordel SQL
                                  ...
                                  $title = "";
                                  while ($msg = $sql->fetch_row())
                                  {
                                    echo "the message is $msg[1]"; //cette variable cest le message
                                    
                                    $title= $msg[1];
                                  }
                                  
                                  ?>
                                  
                                  <script>document.title ="<?php echo $title;?>";</script>
                                  
                                  </div>
                                  
                                  
                                  <script>
                                  setInterval(function(){
                                     $('#refreshed').load("mapage.php #refreshed");
                                  }, 2000) /* time in milliseconds (ie 2 seconds)*/
                                  </script>


                                  Donc ça met bien à jour le div toutes les 2 secondes, mais la directive document.title qui est censé changer le titre n'a aucun effet. J'ai l'impression que le titre ne change que si je recharge toute la page et que le fait de recharger juste un div semble bloquant ou quelque chose comme ça, je bloque. :/

                                  J'aimerais mettre à jour juste le titre sans mettre à jour toute la page, et ça a pas l'air de marcher comme ça. des idées svp?

                                  Et merci beaucoup pour votre aide en tout cas! :)

                                  Si vous voulez plus de précisions dites moi.

                                  -
                                  Edité par petitradisgris 22 juin 2018 à 21:25:13

                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Find various resources, tuturials and online tools at: https://finseckto.com

                                    25 juin 2018 à 11:43:14

                                    Bonjour,

                                    Ta solution ne marche pas car le JS ajouté dynamiquement dans la page ne sera jamais éxécuté par le navigateur de façon automatique. Il faut que celui-ci soit dans la page au chargement ou dans un fichier js en tant que ressource externe. Mais tu as un moyen d'éxécuter du code JS aprés le chargement de la page avec la fonction eval() .

                                    la fonction .load() que tu utilise est équivalente à .ajax GET  mais elle est plus spécifique, je te propose une solution plus générique. Tant que tu fait de l'ajax le contenu de ton input ne sera pas rechargé. Quand tu utilise load ça va chercher ta page entière sur le serveur puis Jquery prend la div et la remplace dans ton DOM.

                                    Pour ton application si tu cherche a faire quelque chose de dynamique pourquoi ne pas faire une api ? Je m'explique tu crée le squelette vide de ta page html puis avec des ajax tu va chercher chacunes des informations dont tu as besoin et coté serveur tu fait une page pour chaque informations que tu souhaite, tu récupére les infos en JSON ou raw (une page pour les lignes bdd, une pour le titre , etc... ). ça te permet d'avoir une appli un peu plus modulable

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      26 juin 2018 à 22:36:35

                                      hmmm merci pour ta réponse.

                                      j'ai un peu essayé evel() mais ça a pas trop l'air de marcher non plus.

                                      Dommage, je pensais qu'il y avais une solution plus simple que ca mais bon, je vais tenter de re-designer ma page en mode "API" comme tu as l'air de suggérer, mais ça risque de me prendre du temps parce que a page est plûtot chargée ;)

                                      En tout cas merci pour ton aide.

                                      • Partager sur Facebook
                                      • Partager sur Twitter

                                      Find various resources, tuturials and online tools at: https://finseckto.com

                                        27 juin 2018 à 18:59:32

                                        Encore une question stp:

                                        apres un load() "comme dans mon exemple", il est impossible de faire aucune redirection (meme forcée). Avec php, ou javascript ou meme html?

                                        Ya vraiment rien qui marche?

                                        -
                                        Edité par petitradisgris 27 juin 2018 à 18:59:49

                                        • Partager sur Facebook
                                        • Partager sur Twitter

                                        Find various resources, tuturials and online tools at: https://finseckto.com

                                          28 juin 2018 à 11:31:07

                                          Il est impossible de bloquer un changement de page sur un navigateur sinon les sites pourraient te bloquer dans ta navigation.

                                          Tu peux utiliser le code suivant pour que l'utilisateur valide le fait de changer de page. (Perso je trouve ça très chiant quand un site fait ça).

                                          window.onbeforeunload=function(){
                                              return "En quittant vous perdrez vos informations";
                                          }



                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          Rafraichir page web sans perdre contenu de input

                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                          • Editeur
                                          • Markdown