Javascript unobtrusive

Signaler
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,
Débutant en javascript, j'ai créé un script très utile pour afficher du contenu dynamique dans plusieurs div à la demande.
Je souhaiterais rendre ce script unobtrusive, afin de le rendre compatible avec les navigateurs ayant désactivé javascript. D'autre part, je ne suis pas sûr qu'il soit obtimisé.
Quelqu'un peut-il m'aider ?





[./page1.html Ma page 1]
 
[./page2.html Ma page 2]
 

12 réponses

Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

Petit problème lors de la saisie du message

Dans le head :

<

script type="text/javascript" language="javascript">
function ouverture(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest)
{ xhr_object = new XMLHttpRequest(); }
else if(window.ActiveXObject)
{ xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
else
{ alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); }

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function()
{
if ( xhr_object.readyState == 4 )
{
if(xhr_object.status != 200)
{
document.getElementById(position).innerHTML ="Erreur " + xhr_object.status;
} else
{
// j'affiche ou je cache dans la DIV spécifiées le contenu retourné par le fichier

if (document.getElementById)
{
if (document.getElementById(position).style.display == "block")
{ document.getElementById(position).style.display = 'none'; }
else if (document.getElementById(position).style.display == "none")
{ document.getElementById(position).style.display = 'block'; }
else { document.getElementById(id).style.display = 'none'; }
}
document.getElementById(position).innerHTML = xhr_object.responseText;
}
} else { document.getElementById(position).innerHTML = 'Chargement des données en cours...

'; }
}
// dans le cas du get
xhr_object.send(null);
};
</script>

Dans le body :

<

a href="./page1.html" onclick="ouverture(this.getAttribute('href'),'page'); return false;">Ma page 1



<

a href="./page2.html" onclick="ouverture(this.getAttribute('href'),'page2'); return false;">Ma page 2
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
J'aurais au moins appris un mot
aujourdh'ui! unobtrusive
mais
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, ...le rendre compatible avec les navigateurs
ayant désactivé
javascript</td>
</td></tr></tbody></table>est un
non sens, me semble t-il si j'ai tout bien compris...

Toujours si j'ai
bien compris le sens du mot, ton soucis et qu'il te faut passer par une class
déclarée dans les balises concernées.
exemple :
[page_1.html Voir la
page 1]
[page_2.html Voir la
page 2]

dans ton fichier js externe, pour être
unobtrusive, il te faut mettre une fonction sur le onload du document qui va récupérer les liens ayant
la class ouverture_auto et
leur assigner la fonction qui va bien sur l'événement onclick de ceux ci.

Pour ce faire...
à
partir de la collection document.links, qui
contient les liens de ta page, tu testes si le lien à la bonne classe, avec
className, et tu lui affecte la fonction grace
à addEventListener ou attachEvent pour IE.

Mais ai je bien percuté !!!!!!
;O)
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

Bien dit,
Je cherche à retirer les instructions javascript inline.
Seulement, grand débutant, je n'arrive pas à écrire les événements onclick et surtout récupérer la variable qui va afficher le contenu de ma page1.html dans la div de destination...
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Juste pour une approche e ce que l'on
peut faire...
<html>

<head>
<script type= "text/javascript">
//------------------
function Init_Page(){

  var Nbr = document.links.length;
  for( i=0; i < Nbr; i++){

    alert( document.links[i].className);
  }
}
</script>

</head>

[page_1.html Voir la page 1]


[page_2.html Voir la page
2]

[page_3.html Voir la page 3]


</html>
;O)
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

Merci
Par contre, je ne sais pas comment instancier le fait qu'un clic doit renvoyer la page vers une div spécifique...
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Il te suffit de récupérer l'id du DIV de destination fonction du lien en cours,
en lui mettant une id par exemple...
Cela
peut donner ceci...
<html>
<head>
<style type= "text/css">
div {

  height : 50px;
  width : 400px;
  border : 1px solid gray;
}

</style>
<script type="text/javascript">
//------------------
function Init_Page(){

  var Nbr = document.links.length;
  for( i=0; i < Nbr; i++){

    var O_Lien = document.links[i];              // Recup l'objet
Lien
    var szID = 'D' + O_Lien.id;                  //
Affecte l'ID de destination
    var O_Dest =
document.getElementById( szID); // Recup le DIV
destinataire
// alert( O_Lien.className);

    O_Dest.innerHTML = O_Lien.href;              //
Ecriture dans DIV correspondant
  }
}
</script>

</head>

[page_1.html Voir la page 1]


[page_2.html Voir la page
2]

[page_3.html Voir la page
3]








</html>
;O)
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

D'accord pour la boucle links.
Par contre la requete onclick n'apparaît pas.
Je crois que je vais rester sur ma version obtrusive...
Merci à toi !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
OUPS ! pas bien lu ton dernier envoi...la
fatigue ou le blanc ?

<html>
<head>
<style type= "text/css">
div {

  height : 50px;
  width : 400px;
  border : 1px solid gray;
}

</style>
<script type="text/javascript">
//----------------------
function Affiche(
this_){
  var szID = 'D' + this_.id;                   // Affecte l'ID
de destination
  var O_Dest = document.getElementById( szID);
// Recup le DIV destinataire

  O_Dest.innerHTML += this_.href;
  return( false);                              // Stop propagation IMPORTANT
}
//------------------
function Init_Page(){

  var Nbr = document.links.length;
  for( i=0; i < Nbr; i++){

    var O_Lien = document.links[i];            // Recup l'obet
Lien
    //-- Test si la classe est la
bonne
    if( O_Lien.className.indexOf( 'ouverture_auto') >
-1){
      O_Lien.onclick = function(){
          return( Affiche(
this));             // la fonction sur le onclick

      }
    }
  }
}
</script>

</head>

[page_1.html Voir la page 1]


[page_2.html Voir la page
2]

[page_3.html Voir la page
3]

DIV DA_1



DIV DA_2



</html>
ceci n'est qu'un exemple de procédure bien sur...
;O)
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

Merci à toi,
Si j'ai bien compris, je dois ensuite placer mon script en l'adaptant en lieu et place de function Affiche( this_);
Car ta fonction affiche le résultat du lien, mais pas le contenu sur le test que j'ai fait...
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
dans mon exemple la fonction Affiche peut
être remplacée par n'importe quelle fonction, à condition de lui passer le
paramètre this, qui est l'objet lien cliqué.
;O)
Messages postés
9
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 novembre 2008

Merci mais je bute. Il doit y avoir une erreur : voici mon code fini


<
script type="text/javascript">
//----------------------
function Affiche( this_){
var szID = 'D' + this_.id; // Affecte l'ID de destination
var O_Dest = document.getElementById( szID); // Recup le DIV destinataire
var xhr_object = null;
//var position = O_Dest;
if(window.XMLHttpRequest)
{ xhr_object = new XMLHttpRequest(); }
else if(window.ActiveXObject)
{ xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
else
{ alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); }

// On ouvre la requete vers la page désirée
xhr_object.open("GET", this_.href, true);
xhr_object.onreadystatechange = function()
{
if ( xhr_object.readyState == 4 )
{
if(xhr_object.status != 200)
{
document.getElementById( szID).innerHTML ="Erreur " + xhr_object.status;
} else
{
// j'affiche ou je cache dans la DIV spécifiées le contenu retourné par le fichier

if (document.getElementById)
{
if (document.getElementById( szID).style.display == "block")
{ document.getElementById( szID).style.display = 'none'; }
else if (document.getElementById( szID).style.display == "none")
{ document.getElementById( szID).style.display = 'block'; }
else { document.getElementById( szID).style.display = 'none'; }
}
document.getElementById( szID).innerHTML = xhr_object.responseText;
}
} else { document.getElementById( szID).innerHTML = 'Chargement des données en cours...

'; }
} return( false); // Stop propagation IMPORTANT
}
//------------------
function Init_Page(){
var Nbr = document.links.length;
for( i=0; i < Nbr; i++){
var O_Lien = document.links[i]; // Recup l'obet Lien
//-- Test si la classe est la bonne
if( O_Lien.className.indexOf( 'ouverture_auto') > -1){
O_Lien.onclick = function(){
return( Affiche( this)); // la fonction sur le onclick
}
}
}
}
</script>
</head>

<
a id="A_1" href="hanoi.html" class="ouverture_auto">Voir la page 1

<
a id="A_2" href="page_2.html" class="ouverture_auto">Voir la page 2

<
a id="A_3" href="page_3.html" >Voir la page 3

DIV DA_1



DIV DA_2



</html>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
peut être des précisions sur ce qui ne
fonctionne pas...

juste au passage pourquoi ne pas utiliser
O_Dest à la place de document.getElementById( szID) que tu
reprends partout, cela aurait le mérite de clarifier ton code
;O)