Re: [TECH] rafraichir une page sans clignotement

[Jean Montane <jmontane AT april.org>]

antoine AT starinux.org a écrit :

Bonsoir,
  

Bonjour,

Comme vous le savez, cette balise permet de rafraichir une page WEB toutes les X secondes :

<META HTTP-EQUIV="refresh" CONTENT="X">

(X = 1, 2 ... secondes)

Seulement, 2 petits problèmes :
- La page clignote au moment de son rechargement,
- Ça semble ralentir l'ordinateur ...
  

Bien sûr, surtout si la page est lourde (affichage complexe, kos d'images, tonnes de _javascript_...), mais ces 2 petits problèmes sont un peu inévitables.

Connaissez vous un autre moyen de rafraîchir une page sans "à coups",
en AJAX ou autres ... ?
  

Oui, mais ce n'est pas sans inconvénient, voir ci-dessous.

J'ai tenté en début de page :
"<?php header("Location: index.php"); ?>"
mais une redirection sur la même page ne semble pas acceptée.
  

Ce code s'exécute sur le serveur, une fois la page transmise, il n'y a pas de réaffichage répété côté navigateur client.

Il s'agit de rafraîchir une page si un évènement s'est produit :
Une personne a ajouté une info et la page doit alors être rafraîchie.
  

Tu gagnerais sans doute à simplement modifier l'affichage à l'aide de _javascript_ :
le plus simple reste de mettre des infos concurrentes dans des <div id="id_unique">
et de choisir quel div afficher en fonction des changements :

setDisplayProperty ("id_unique", none);  // masquer

ou 

setDisplayProperty ("id_unique", block); // afficher

function setDisplayProperty (_ID, _val)

{ // avec gestion multi navigateurs

  _styleelt = (document.layers ? document.layers[_ID] : (document.all ? document.all[_ID].style : document.getElementById (_ID).style));

  if (typeof (_styleelt.setAttribute) == "undefined")

    _styleelt.display = _val;

  else

    _styleelt.setAttribute ("display", _val);

}

Dans ce cas, pas de clignotement de page.


Tu peux même afficher / masquer des portions de formulaire, et dans ce cas, 
le mieux est de désactiver les éléments masqués, pour éviter qu'ils ne soient transmis au serveur :

document.getElementById('id_element_1').disabled=false;

document.getElementById('id_element_2').disabled=true;

Est-ce possible et cela peut aussi vous donner une piste pour la réponse.

Grand merci.

antoine Waché
  

Finalement, si tu tiens à repasser par ton serveur pour les tests,
mais que tu ne souhaites pas travailler avec un énorme jeu de scripts tout faits,
tu peux t'inspirer librement de ceci :
(c'est tiré de code en production)

Sur tes input à surveiller (ou select, etc), tu mets des actions sur les événements qui t'intéressent :

<input type="text" value="valeur_initiale" id="une_reference_unique" > />

ensuite, tu fais du _javascript_ comme ça :

function ma_fonction( objet_qui_change )

{

  var mon_objet_a_modifier_01 = document.getElementById ("mon_id_01");

  var mon_objet_a_modifier_02 = document.getElementById ("mon_id_02");

  mon_objet_a_modifier_02.innerHTML = "Nouvelle saisie en cours de validation...";

  // supprime une instance antérieure

  if (mon_objet_request && mon_objet_request < 4)

    mon_objet_request.abort ();

  // nouvelle instance, en bon xml si possible

  if (window.XMLHttpRequest)

    mon_objet_request = new XMLHttpRequest();

  else

    mon_objet_request = new ActiveXObject("Microsoft.XMLHTTP");

  mon_objet_request. () { ma_fonction_qui_change_l_affichage(nouvelle_valeur); };

  mon_objet_request.open ("GET", "mon_script_serveur.php?code=" + objet_qui_change.value);

  mon_objet_request.send (null);

  displayMessageOffre ();

  return false;

}

function ma_fonction_qui_change_l_affichage (nouvelle_valeur)

{

  if ( mon_objet_request && mon_objet_request.readyState == 4 && document.getElementById ("mon_id_02") != undefined )

  {

    var txt = mon_objet_request.responseText;

    if (txt)

    {

      var target = document.getElementById ("mon_id_02");

      // actions et tests qui vont bien ...

      if ( txt.je_suis_satisfait() )

      {

        target.innerHTML = txt;

      }

      else

      {

        target.innerHTML = "Erreur lors de la validation de la nouvelle saisie";

      }

    }

    mon_objet_request = false;

  }

}

Et coté serveur :

<?php

/** 

 *    mon_script_serveur.php  

 *

 * @author c'est moi ;)

 * @package validation_de_mes_formulaires

 */

// Pas de cache (IE)

header ('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

header ('Last-Modified: ' . gmdate ("D, d M Y H:i:s") . ' GMT');

header ('Pragma: no-cache');

$code = strip_tags($_REQUEST['code']);

// traitements qui vont bien...

if ( !ca_a_bien_marche($code) )

{

  echo '-1';

  exit ();

}

// else

echo $le_html_qui_va_bien;

?>

L'intérêt majeur de tout cela est de ne pas recharger et réafficher toute ta page, 
surtout dans les cas où elle est assez lourde (images, _javascript_s immenses), tout
en réalisant tes tests côté serveur. 
Cela évite alors les clignotements qui te gênent. 

ATTENTION cependant :

Ce code est visible de tes visiteurs, en particulier l'adresse du script_serveur. 

Du coup, tu peux (donc vas) te retrouver avec des requêtes de curieux en tous genres 
et tu as intérêt à blinder le code qui traite les valeurs transmises
(ce qui est toujours vrai quand on travaille avec des formulaires).

Qq références en français archi-basiques, mais toujours utiles :)

http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko

http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core

http://www.la-grange.net/w3c/html4.01/interact/forms.html

http://www.php.net/manual/fr/

Jean

-- 


La non-violence est la Force qui transformera notre monde !


.

-- 


La non-violence est la Force qui transformera notre monde !


.