Eviter mélange Javascript/HTML

Bonsoir,

Je vais faire court et parler d'une partie de développement où je me pose une question.

Je sépare le javascript du code xhtml au maximum, mais je me demande si dans ce cas je peux :
je suis en une "grille" (table) dans laquelle j'ai des entêtes qui lors du survol me propose une liste de choix de filtrage sous la forme <ul>.

chaque élément de la liste <li> peut être cliqué et doit retourné pour un traitement ajax son "id" mysql :
20 pour choix 1
25 pour choix 2
etc...

comment puis-je éviter de mettre des onclick avec la valeur à passer ?

voici ce que je suis en train de faire.

Salut,

a écrit :
Je sépare le javascript du code xhtml au maximum, mais je me demande si dans ce cas je peux

Tu peux tout le temps...

a écrit :
comment puis-je éviter de mettre des onclick avec la valeur à passer ?

Sans bout de code, difficile d'être clairvoyant mais je pense que tu peux faire une boucle sur les éléments de la liste et récupérer leur id via la propriété id... justement.

var oLi = document.getElementsByTagName('li'), iI = 0, iCount = oLi.length;

for(iI; iI < iCount; iI++) alert(oLi[iI].id);

Bon je mets ci dessous le code en question (je suis en train de transformer ce html en xlm+xsl pour la partie "1er chargement" et ajax.

Code HTML,il s'agit des "onclick".

<table border=1 width="400">
<thead id="gheader">
	<tr>
		<th>
      <div style="background-color:blue;">Titre1
      <ul id="f">
        <li onclick="filtre(0)">Choix1</li>
        <li onclick="filtre(2)">Choix2</li>
        <li onclick="filtre(3)">Choix3</li>
      </ul>
      </div>
    </th>
		<th>
      <div>Titre2
      <ul class="choixliste">
        <li>Choix1</li>
        <li>Choix2</li>
        <li>Choix3</li>
      </ul>
      </div>
    </th>
		<th>
      <div>Titre3
      </div>
    </th>
	</tr>
</thead>
<thead>
	<tr>
		<th>VFiltre1</th>
		<th>VFiltre2</th>
		<th>VFiltre3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>donnée1</td>
		<td>donnée2</td>
		<td>donnée3</td>
	</tr>
	<tr>
		<td>donnée1</td>
		<td>donnée2</td>
		<td>donnée3</td>
	</tr>
</tbody>
</table>

le Css

<style>
UL.cache
{
visibility:hidden;
display:none;
}
UL.affiche
{
  background-color:orange;
  position:absolute;
  margin-top:0;
  visibility:visible;
  display:block;
}

UL.affiche LI
{
  color:yellow;
}

UL.affiche LI.hv
{
  color:red;
}
</style>

le javascript

<script type="text/javascript">
document.onload= charge();

function charge()
{
  var entete = document.getElementById(\'gheader\');   
  if (entete)
  {
    var TH = entete.getElementsByTagName(\'div\');
    var dv=null;
    var UL=null;
    for (i=0; i<TH.length; i++)
    {      
      // Existe t-il un ul ?      
      var UL = TH[i].getElementsByTagName("ul");
                
      if (UL.length>0)
      {
        UL[0].className="cache";
        TH[i].onmouseover=function(){cachemontre(this,true);}
        TH[i].onmouseout= function(){cachemontre(this,false);}
        
        var LI = UL[0].getElementsByTagName("li");
         if (LI[0])
         {
          for (j=0; j<LI.length; j++)
          {
            LI[j].onmouseover = function(){this.className="hv";}
            LI[j].onmouseout = function (){this.className=null;}
          }
         }        
      }     
   }
  }
}

function cachemontre(obj,b)
{ 
  var UL = obj.getElementsByTagName("ul");
  if (UL[0])
    UL[0].className= b ? "affiche" : "cache";
}

// Ajax

</script>

koala64 a écrit :
Salut,

Je sépare le javascript du code xhtml au maximum, mais je me demande si dans ce cas je peux

Tu peux tout le temps...

a écrit :
comment puis-je éviter de mettre des onclick avec la valeur à passer ?

Sans bout de code, difficile d'être clairvoyant mais je pense que tu peux faire une boucle sur les éléments de la liste et récupérer leur id via la propriété id... justement.

var oLi = document.getElementsByTagName('li'), iI = 0, iCount = oLi.length;

for(iI; iI < iCount; iI++) alert(oLi[iI].id);

=> les id à récupérer, il faut que je les mettes quelque part... mais je ne pense pas que je puisse les mettre "comme ca" car il peut en avoir plusieurs identiques (exemple id de ma table mysql genre peut avoir la même valeur que l'id de ma table format)[/i][/i][/i]

N'aurais-tu pas la fonction flitre plutôt parce que là, je ne sais pas ce qu'elle fait...

PS : Plusieurs id identiques au sein d'une même page est invalide.

koala64 a écrit :
N'aurais-tu pas la fonction flitre plutôt parce que là, je ne sais pas ce qu'elle fait...

PS : Plusieurs id identiques au sein d'une même page est invalide.

Je vais te montrer la fonction filtre (basé sur les test que j'ai fais durant la semaine) car c'est la première fois que je fais de l'ajax,xml et xsl

j'ai donc commencé par "morceau" pour tester, puis je peaufine progressivement.

code javascript pour l'ajax (en fait je passe 2 paramètre à ma page php l'action et sa valeur, exemple g=4, c'est quand je clique sur le filtre "genre" identifiant 4, qui signifierais que je veux filtré pour n'avoir que "science fiction"

var XMLHTTP = null;

function getXMLHTTP()
{
  var xhr=null;
  
  if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest();
  else if(window.ActiveXObject) // Internet Explorer
  { 
    try { xhr = new ActiveXObject("Msxml2.XMLHTTP");}
    catch(e)
    {
      try { xhr = new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e1) {xhr = null;}
    }    
  }
  else  // XMLHttpRequest non supporté par le navigateur
  { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");}
  return xhr;  
}

// Image indiquant comme quoi la demande est en cours
function waitLoading(active)
{
  var etat = 'hidden';
  if (active)
    etat='visible';
  
  document.getElementById("loading").style.visibility=etat;      
}

function filtre(paraName,value)
{
  XMLHTTP = getXMLHTTP();
  var url="listeFct.inc.php";  
  
  XMLHTTP.open("POST",url,true);
  XMLHTTP.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // Passage des arguments    
  XMLHTTP.send(paraName+'='+value);
    
  waitLoading(true);
  XMLHTTP.onreadystatechange = function (){traitementRetour('filtre',XMLHTTP);}
}

function traitementRetour(typeAction,xmlHttp)
{
  if(xmlHttp.readyState == 4)
  {
    if (xmlHttp.status == 200)
    {      
      writeGrille(xmlHttp.responseXML);      
    }
    else
    {
    }
    waitLoading(false);
  }  
} 

function writeGrille(texte)
{
//traitement xsl sur le xml retourné
}

pour ce qui est de plusieurs id identique, je sais, c'est pourquoi je me demande comment je pourrais "externaliser" les onclick du html

voilà voilà.

<ul id="f">
     <li onclick="filtre(0)">Choix1</li>
     <li onclick="filtre(2)">Choix2</li>
     <li onclick="filtre(3)">Choix3</li>
</ul>

Le premier soucis se trouve dans le code ci-dessus. Un li, ce n'est pas cliquable d'origine. Si tu le fais via javascript, tous ceux qui naviguent au clavier ne pourront pas y accéder. (Le problème est le même pour tes éléments th au sein de la fonction charge) Tu dois donc écrire cela :

<ul id="f">
     <li><a href="...">Choix1</a></li>
     <li><a href="...">Choix2</a></li>
     <li><a href="...">Choix3</a></li>
</ul>

et ces choix doivent être transmissibles via php. C'est la première chose à faire.

Vu qu'il te faudra passer les paramètres par l'url pour php, tu peux t'en servir en les récupérant via JS afin de les transmettre à la fonction filtre.
Ajax, ok mais pas quand ça repose sur de la paille...

Pour l'externalisation des onclick, je ne vais pas te donner une réponse toute faite mais plutôt t'inviter à lire ce tuto.

koala64 a écrit :

<ul id="f">
     <li onclick="filtre(0)">Choix1</li>
     <li onclick="filtre(2)">Choix2</li>
     <li onclick="filtre(3)">Choix3</li>
</ul>

Le premier soucis se trouve dans le code ci-dessus. Un li, ce n'est pas cliquable d'origine. Si tu le fais via javascript, tous ceux qui naviguent au clavier ne pourront pas y accéder. (Le problème est le même pour tes éléments th au sein de la fonction charge) Tu dois donc écrire cela :

<ul id="f">
     <li><a href="...">Choix1</a></li>
     <li><a href="...">Choix2</a></li>
     <li><a href="...">Choix3</a></li>
</ul>

et ces choix doivent être transmissibles via php. C'est la première chose à faire.

Vu qu'il te faudra passer les paramètres par l'url pour php, tu peux t'en servir en les récupérant via JS afin de les transmettre à la fonction filtre.
Ajax, ok mais pas quand ça repose sur de la paille...

pour les passage en url pour Php c'est ce que je faisais auparavant ( dans une autre version) j'avais une fonction php qui se charger de traiter les paramètres exemple : url?a=1&b=2&c=14
pour chaque lien, en effet je peux avoir plusieurs filtre actif à la fois.
sauf que pour cette fois, je traite différement la chose, je mets une session coté serveur qui sait quel sont les filtres,lettre de tri,page ... en cours, je veux donc passer le minimum d'information.

Nota : le site est destiné à des utilisateurs restreints (je sais ca n'empêche pas de faire le tout proprement pour les href) donc je sais ce que posséde les utilisateurs et les paramètres des navigateurs à mettre en cas de problème (activation JS par exemple).

ce que j'avais penser faire, c'est de généré 2 parties du code (si javascript : methode ajax lien "onclick" sinon lien href et navigation standard) c'est pourquoi je fais les 2 traitements dans le même fichier PHP (en gros :si GET = url, si POST = Ajax)

J'ai regarder le tuto, très bien fait, mais je m'avoue un peu perdu , je pense qu'il faut déjà pas mal maitriser l'ensemble pour le comprendre. la technique JSON me semble bien sympa mais ca me ferais sans doute remettre en cause la route que je me suis tracé, je pense qu'il faut que j'avance pour le moment pour avoir quelque chose de fonctionnel, et pas revenir en arrière pour de nouveau changer de techno. Pour le moment je veux pouvoir le rendre fonctionnel et pouvoir ajouter au fur et à mesure le reste, mais il faut quand même que la structure soit pensé pour au départ.

pour info, comme beaucoup je me suis forcé à me mettre au javascript et je veux donc l'utiliser avec parcimonie.

nota : il faut bien que je détecte si la personne à le javascript d'actif sinon si je mets un evenement sur le href alors j'aurais les 2 evenements de traiter (JS -> ajax et HTML -> Postback)

Rebonjour,

a écrit :
pour info, comme beaucoup je me suis forcé à me mettre au javascript et je veux donc l'utiliser avec parcimonie.

Raison de plus pour ne pas transmettre tes données via Ajax dès le départ... Ajax est une surcouche, ça vient en deuxième passage... Là, tu fausses d'entrée de jeu ton appli'... Ce qui compte n'est pas de mettre peu ou beaucoup de JS mais surtout de bien s'en servir... Ajax doit rester optionnel et c'est plus compliqué à mettre en oeuvre que PHP qui, lui, n'est pas optionnel.

a écrit :
nota : il faut bien que je détecte si la personne à le javascript d'actif sinon si je mets un evenement sur le href alors j'aurais les 2 evenements de traiter (JS -> ajax et HTML -> Postback)

Non, du tout... Lorsque tu rajoutes la couche JS, tu peux annuler l'envoi des données via un return false (j'en parle dans le tuto ) donc si ton appli est fonctionnelle avec PHP, il n'y a aucun problème par la suite vu que tu peux l'annuler et la remplacer par ton action Ajax... Tu as beau savoir le contexte dans lequel se trouvent tes utilisateurs, ça n'empêche pas de faire quelquechose de qualité. Ils ne t'en seront que plus reconnaissant. Si j'insiste aujourd'hui, c'est parce que tout celà se pense dès le départ faute de quoi, lorsque tu vas prendre conscience des problèmes, il te faudra tout recommencer... De meilleures fondations en amont ne peut être que bénéfique...
Modifié par koala64 (04 Dec 2006 - 05:58)

Je dit ça comme ça peut-être je suis à côté de la plaque, mais il y a peut-être un truc que conan76 ne sait pas, c'est tous simplement le "return false". je dit ça parceque j'ai eu le même probléme et ça ma simplifié la vie (d'ailleur c'est koala qui me l'a fait remarqué). En fait c'est tout bête, tu fais ton traitement des données html/php normal avec href, et par dessus tu mets ton js avec un return false qui fait que quand js est desactivé ou ne marche pas pour x ou y raison, c'est le href qui fonctionne sinon c'est le js qui traite les données, il renvoie return false et desactive le "href" du lien. C'est une méthode qui est aussi plus "tranquilisante" parcequ'au moins t'es sur que dans tout les cas ça marche en plus c'est plus logique, d'abord tu fait ton truc propre html/php robuste et tout, et ensuite tu rajoute les comportements dynamiques js. Si tu es pressé c'est pas mal aussi parceque tu peux faire en truc qui tourne et améliorer ensuite.
Pour les variables, j'ai eu aussi le même probléme et je l'ai résolu de la maniére suivante:
au lieu d'utiliser des id identiques tu utlilises des id semblabes comme sf1 et sf2 par exemple et ensuite quand tu les récuperes tu utilises les expressions réguliéres comme:

if (El.id.indexOf("+sf") != -1)

qui vat continuer la fonction que si ton id contient "sf"

Tu peux aussi envoyer ainsi 2 paramétres par exmple sf+par1 et sf+par2 dans une même id (ou class) et les recupérer comme ça:

tab = tonid.split("+");
sf = tab[0];
par1 = tab[1];

Il y en a d'autre qui te permette de manipuler les paramétres reçu, de les modifier, de le comparer...etc.
Bien sur il faut tester avec alert() pour s'assurer à chaque fois que ça marche bien, jusqu'a avoir le bon résultat.
Modifié par matmat (04 Dec 2006 - 18:01)

conan76 a écrit :


pour les passage en url pour Php c'est ce que je faisais auparavant ( dans une autre version) j'avais une fonction php qui se charger de traiter les paramètres exemple : url?a=1&b=2&c=14
pour chaque lien, en effet je peux avoir plusieurs filtre actif à la fois.
sauf que pour cette fois, je traite différement la chose, je mets une session coté serveur qui sait quel sont les filtres,lettre de tri,page ... en cours, je veux donc passer le minimum d'information.

[...]

ce que j'avais penser faire, c'est de généré 2 parties du code (si javascript : methode ajax lien "onclick" sinon lien href et navigation standard) c'est pourquoi je fais les 2 traitements dans le même fichier PHP (en gros :si GET = url, si POST = Ajax)

[...]

nota : il faut bien que je détecte si la personne à le javascript d'actif sinon si je mets un evenement sur le href alors j'aurais les 2 evenements de traiter (JS -> ajax et HTML -> Postback)

tu mélanges un peu tout je crois... c'est normal quand on débute, ya pas à s'inquiéter on est tous passé par là...

je vais paraphraser koala64 :

utilises ce qu'il t'as dit à savoir :

<ul id="f">

     <li><a href="...">Choix1</a></li>

     <li><a href="...">Choix2</a></li>

     <li><a href="...">Choix3</a></li>

</ul>

et dans ton href tu mets du javascript, tout con style

<ul id="f">

     <li><a href="javascript:mafonction(this)">Choix1</a></li>

     <li><a href="mafonction(this)">Choix2</a></li>

     <li><a href="mafonction(this)">Choix3</a></li>

</ul>

"this" renverra la variable objet et tu pourras donc simplement en retirer la valeur de son Id, son texte, style etc... etc.. et passer tout ça à ton script php de traitement via Ajax, par exemple...

A mon avis c'est plutot toi qui mélange tout Jeff, l'idée de ce post est d'enlever le javascript du html et toi tu propose... de le remettre!
Si tu utilises les liens pour le javascript, tu ne peux pas les utiliser pour une solution de remplacement, l'idée n'est pas de faire:

<a href="javascript:mafonction(this,eventuelement_une_variable_par_php)">Choix1</a>

mais:

<a href="monurlnormal.html" class="classe_repere_par_js" id="eventuelement_une_variable_par_php">Choix1</a>

et au pire des cas extremes si tu n'arrives pas a passer tes 6 variables uniques a ce passage de ton code dans ton id (ce qui doit plutot être rare, et même là tu peux quand même faire autrement):

<a href="monurlnormal.html" onclick="mafonction(var1,var2,var3,var4,var5,var6)" >Choix1</a>

Modifié par matmat (06 Dec 2006 - 06:08)

Salut,

En fait, je pensais passer chaque paramètre via l'url et le récupérer via JS en faisant un truc dans ce genre :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<script type="text/javascript">//<![CDATA[

[#blue]function Init()
{
   var oUl = document.getElementsByTagName('ul'), iI = oUl.length - 1;
   for(iI; iI >= 0; iI--)
   {
      if(oUl[iI].className == 'param')
      {
         var oA = oUl[iI].getElementsByTagName('a'), iJ = oA.length - 1;
         for(iJ; iJ >= 0; iJ--) oA[iJ].onclick = function()
         {
            var sParam = this.href.substring(this.href.indexOf('=') + 1);
            Alerte(sParam);
            return false;
         };
      }
   }
}
function Alerte(data)
{
   alert(data);
}
window.onload = Init;[/#]

		//]]></script>
	</head>
	<body>

<ul class="param">
   <li><a href="index.php?param=0">Choix1</a></li>
   <li><a href="index.php?param=2">Choix2</a></li>
   <li><a href="index.php?param=4">Choix3</a></li>
</ul>
<ul class="param">
   <li><a href="index.php?param=5">Choix1</a></li>
   <li><a href="index.php?param=8">Choix2</a></li>
   <li><a href="index.php?param=20">Choix3</a></li>
</ul>

	</body>
</html>

S'il y a plusieurs paramètres à passer, la recherche et le passage d'arguments diffère un peu mais le principe reste le même...
Modifié par koala64 (06 Dec 2006 - 11:17)

matmat a écrit :
A mon avis c'est plutot toi qui mélange tout Jeff

en effet après relecture j'en conviens autant pour moi

a écrit :
En fait, je pensais passer chaque paramètre via l'url et le récupérer via JS

C'est une question que je me pose aussi, comment faire passer ces paramétre? Ta méthode est pas mal mais je ne sait pas si c'est optimal niveau referencement, en effet une des bonnes raisons de séparer le js de la structure et que les moteurs ce baladent à travers des url normales ce qui est plus interressant car une nouvelle page, veut dire nouveau titre, nouveau contenu etc... et ça ratrape donc un des autres gros probléme du js, le réferencement. Ors ces même moteur n'aiment pas trop les url à plus de deux paramétres. Bien sur je cherche la petite bête, mais en même temps je me dit quite a chercher une solution optimal pour le passages de paramétres, autant qu'elle soit optimal à tout points de vue.
Suite a tes arguments (cf autres posts) j'ai fait la même chose en passant le ou les paramétres au travers des id, il me semble que cela correspond, une id étant un identifiant unique. Le probléme que j'ai eu c'est que justement comme elle est unique si elle doit agir sur une balise qui a ce même identifiant cela pose un probléme, j'ai donc fait comme ça:

<li><a href="urlnormal" id="+par1+par2">Choix1</a></li>

Les expressions réguliéres se chargeant soit de découper en tableau soit d'enlever les "+", Je ne sait pas dutout si le signe "+" est approprié et je ne suis pas sur non plus de la méthode, par contre le sujet m'interresse beaucoup et j'aimerais bien aussi trouver une belle solution.

Bon ca fait un bon moment que je n'ai pas répondu, il ne faut pas croire que je lache mon problème...
En fait j'ai des problèmes de serveurs (réinstall Apache/Php), pas moyen de faire tourner PHP erreur avec php5apache2.dll. Ne pouvant donc poursuivre mes tests et n'ayant pas de section "serveur" dans le forum je suis allé poster dans un autre site, mais il semble que le problème soit connu, mais même après avoir mis les dernières versions de chaque j'ai toujours mon problème.
En attendant de pouvoir faire tourner mon serveur correctement et de pouvoir poursuivre mes tests, je vous souhaite à tous de bonnes fêtes, et vous remercie de l'aide apporté.
Vincent.