[RÉSOLU] Variable globale ne fonctionne pas avec Internet Explorer

Heyoan a écrit :
En fait l'idée de voir la page en ligne était une bonne idée...

beegees a écrit :
je t'ai envoyé un MP

<script type="text/javascript">var global_id_jour= null;</script>

Ze Nenex a écrit :
C'est tout à fait normal puisque l'alert met en pause l'exécution du script et permet au document DOM d'être prêt, donc sans alert c'est undefined.

Ce qui veut dire que ton code est executé avant que le DOM soit prêt. Si tu boss avec un framework, renseigne toi pour connaitre sa méthode "document ready" ($() pour jQuery par exemple), sinon, ajoute un eventListener à l'événement load, ou si t'as la flemme, définie la fonction window.onload et mets tout dedans...

Heyoan a écrit :
Tu aurais mieux fait de l'envoyer à Ze Nenex qui m'a l'air bien plus calé que moi en JS !








Salut Yoan,

Merci pour ta réponse.

[quote=Heyoan]Quoi qu'il en soit (et en ayant le code sous les yeux) il me semble bien que le problème vient de ce que ta fonction occupe() n'attend qu'1 argument (libre_ou_occupe) alors que dans le code html tu essaies d'en passer 2 : occupe(global_id_jour,'occupe') dont notre fameux global_id_jour.

Heyoan a écrit :
Sinon, puisque tu n'utilises pas window.onload tu ferais sans doute mieux de charger ton JavaScript à la fin de ton code HTML...

Heyoan a écrit :
et mieux encore tu devrais essayer de factoriser tout ton code qui n'en serait que plus lisible (par exemple au lieu d'avoir un onmousedown dans chaque élément TD utiliser addEvent).

Heyoan a écrit :
Edit: Je n'avais pas fait attention mais je vois que le tableau est généré en Ajax (ce qui semble bien confirmer l'hypothèse de Ze Nenex). Question : quel est l'intérêt ? Pourquoi ne pas utiliser un formulaire classique pour choisir le mois et l'année et ne faire que du PHP ?

Heyoan a écrit :
Serais-tu en train de dire que tu ne connais pas encore la Recherche de la section Apprendre ?

Cela dit les tutos concernant jQuery ne parlent pas d'Ajax mais ce n'est pas bien dur d'en trouver une foultitude sur le Web.

Ze Nenex a écrit :
Bosser sans framework n'est pas une tâche facile quand il s'agit d'approcher les event ou de manipuler du DOM, ça devient très vite verbeux et ch***.

Ze Nenex a écrit :

Déjà, et Heyoan te l'a bien dit, factorise tout ça. Exemple: des fonctions bId, bTN qui évitent les document.getElementByblablabla à rallonge, ainsi que les façades addEvent, removeEvent ou XHR sont basiques mais indispensables pour une compatibilités minimales des navigateurs.

Ze Nenex a écrit :

Ensuite, je n'ai pas tout ton code sous les yeux, mais quand il s'agit d'attaquer du DOM, le strict minimum est d'attendre que ce dernier soit prêt.

Ze Nenex a écrit :

L'ultra basique et l'archi-pas-recommandé est de passer par la propriété (fonction) window.onload. Dans le même domaine de "craditude", tu peux mettre ton script tout en bas de la balise body...

Ze Nenex a écrit :

Vu que tu me déconseilles ces pratiques, je ne vais pas le faire, je vais commencer à procéder d'une façon correcte.

Ze Nenex a écrit :

Mais le mieux pour commencer est de se servir d'une façade genre "addEvent" (google est ton ami) pour attribuer un "handler" (une fonction) à l'événement load: addEvent(window, "load", myFunction);

Ze Nenex a écrit :

Dernière chose. Oublie les variables globales et pense plutôt à un namespace. En plus, en JS ce n'est pas bien compliqué, tu mets tout dans un objet :

myNS = {
  init: function(e) {
  },

  ID_JOUR: null
  // ...
};

addEvent(window, "load", myNS.init);

De cette façon tu évites de polluer l'espace globale et tu permets à d'éventuels autres namespace de cohabiter / discuter entre eux. En ayant tout ça, crois-moi, ton problème serait réglé.

Ze Nenex a écrit :

Pour répondre à ta question, eventListener n'est pas du jQuery. Il s'agit plutôt des méthodes DOM addEventListener et removeEventListener, non compatible IE, d'où l'intérêt de les encapsuler dans une méthode dite "façade" qui se chargera du bon comportement (IE = attachEvent et pas de phase de capturing). Tu en trouveras pleins sur le net.

beegees a écrit :
Factoriser c'est donc "créer un raccourci" ?

<script type="text/javascript">
		function addEvent(obj, event, fct) 
		{
			if (obj.attachEvent) //Est-ce IE ?
				obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
			else
				obj.addEventListener(event, fct, true);
		}
	</script>

<script type="text/javascript">addEvent(window , "load", occupe);</script>

<div id="menucontextuelProposer_Reservation" class="menucontextuel">
		<ul>
			<li><em>Demande de réservation</em></li>
			<li><a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a></li>
			<li><a href="javascript:;"onClick="hideMenu(); occupe('ESC'); return false;">Annuler</a></li>
		</ul>
	</div>

Ze Nenex a écrit :
(...) jQuery qui par ailleurs devient de plus en plus LE framework.

beegees a écrit :
Je déclare donc le code ci-dessus dans la page principale.

beegees a écrit :
Dans la même page, j'ai mis ceci juste en dessous du body

beegees a écrit :
On ne peut pas passer d'argument ? la fonction "occupe" prend un argument.

a écrit :
Tel que tu as écrit ta fonction addEvent, les méthodes attachEvent et addEventListener ne fonctionnent pas dans le même mode; tu risques donc d'avoir quelques surprises. cligne
Le troisième paramètre que tu passes à addEventListener est le mode de propagation : capturant ou... "effervescent".
Aussi, attachEvent n'offre pas ce contrôle; IE ne connait pas le mode capturant, d'où le fait qu'on l'évite.
Il serait donc préférable de passer ta variable à "false". (C'est précisé dans le lien que t'a fournit Heyoan)

Par ailleurs, addEventListener est la norme et attachEvent, l'exception. Cela ne porte pas trop à préjudice de le laisser tel quel mais, d'une manière générale, il vaut mieux privilégier la norme PUIS gérer les exceptions en cas de mauvaise interprétation.

<script type="text/javascript">
		function addEvent(obj, event, fct) 
		{			
			if (obj.addEventListener) //Est-ce Firefox de Mozilla ?
				obj.addEventListener(event, fct, false);
			else				
				obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
		}
	</script>

a écrit :

Tu peux même mettre cette instruction dans un fichier externe. Dès lors, tu peux centraliser tous tes scripts dans ce fichier, ce qui facilite la maintenance et tu disposes ainsi, si tu le souhaites, de cette fonction sur chacune de tes pages sans avoir à la redéclarer.

<script type="text/javascript" src="Fonctions/addEvent.js"></script>

a écrit :

Dès lors, tu peux centraliser tous tes scripts dans ce fichier

a écrit :

Il est tout à fait possible de passer une fonction en argument de addEvent puis, au sein de celle-ci, exécuter la fonction "occupe" en lui passant un argument.

<li id="appel_occupe"><a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a></li>

<a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a>

Heyoan a écrit :
voir Factorisation (Wikipedia).

Sinon je te redonne le lien vers le tuto de koala64 : Comment bien coder en Javascript (à lire d'urgence ).

alert("param 1" + e);
alert("param 2" + pIdMenu);
alert("param 3" + id_jour);
alert("param 4" + user);

a écrit :

param 1 [objectEvent]
param 2
param 3 undefined
param 4 undefined

function test(event) {
   var oElem = event.target || window.event.srcElement;
   alert(oElem.id);
}

Heyoan a écrit :
Re',

je suppose que tu veux parler de cela :

function test(event) {
   var oElem = event.target || window.event.srcElement;
   alert(oElem.id);
}

... ou pas ?

<!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=UTF-8" />
<title>Test</title>
<style type="text/css">
td {
	border: 1px solid blue;
}
</style>
<script type="text/javascript">
<!-- 
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

// fonction test
var oTest =
{
	// Initialisation des évènements sur les TD
	_Init: function()
	{
		// Récupération de tous les TD de la table
		var lTDs = document.getElementById('maTable').getElementsByTagName('td');
		if(!lTDs) return;
		for(var iI = 0; iI < lTDs.length; ++iI){	// Pour chaque TD...
			var eTD = lTDs[iI];
			// addEventListener
			addEvent(eTD, 'contextmenu', oTest._ReturnFalse, false);
			addEvent(eTD, 'mousedown', oTest._ClickDroit, false);
		}
	},
	
	// On désactive contextmenu sur les TD pour éviter les conflits avec ClickDroit
	_ReturnFalse: function(event)
	{
		if (event.preventDefault) { 
		  event.preventDefault(); 
		} 
		event.returnValue = false;
	},
	
	// Affichage Clic Droit
	_ClickDroit: function(event)
	{
		var oElem = event.target || window.event.srcElement;
		if(event.button==2) {
			alert("Vous avez fait un clic droit sur " + oElem.id);
		} else {
			alert("Vous n'avez pas fait un clic droit sur " + oElem.id);
		}
	}
};
if(document.getElementById && document.getElementsByTagName) addEvent(window, 'load', oTest._Init, false);
-->
</script>
</head>
<body>
<table id="maTable">
	<tr>
		<td id="td1_1">Bla Bla 1_1</td>
		<td id="td1_2">Bla Bla 1_2</td>
		<td id="td1_3">Bla Bla 1_3</td>
	</tr>
	<tr>
		<td id="td2_1">Bla Bla 2_1</td>
		<td id="td2_2">Bla Bla 2_2</td>
		<td id="td2_3">Bla Bla 2_3</td>
	</tr>
</table>
</body>
</html>

<!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=UTF-8" /> 
<title>Test</title> 
<style type="text/css"> 
td { 
    border: 1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
 
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk) 
//fonction générique pour IE et pour FF
function addEvent(oElem, sEvType, fn, bCapture) 
{ 
   return oElem.addEventListener? 
      oElem.addEventListener(sEvType, fn, bCapture): 
      oElem.attachEvent? 
         oElem.attachEvent('on' + sEvType, fn): 
         oElem['on' + sEvType] = fn; 
} 
 
// fonction test 
var oTest = 
{ 
    // Initialisation des évènements sur les TD 
    _Init: function() 
    { 
        // Récupération de tous les TD de la table 
        var lTDs = document.getElementById('maTable').getElementsByTagName('td'); 
        if(!lTDs) return; 
        for(var iI = 0; iI < lTDs.length; ++iI){    // Pour chaque TD... 
            var eTD = lTDs[iI]; 
            // addEventListener 
            addEvent(eTD, 'click', oTest._ClickGauche, false); 
            addEvent(eTD, 'contextmenu', oTest._ClickDroit, false); 
        } 
    }, 
     
    // Affichage Clic Gauche 
    _ClickGauche: function(event) 
    { 
        var oElem = event.target || window.event.srcElement; 
        alert("Clic Gauche sur " + oElem.id); 
    }, 
     
    // Affichage Clic Droit 
    _ClickDroit: function(event) 
    { 
        var oElem = event.target || window.event.srcElement; 
        alert("Clic Droit sur " + oElem.id); 
        if (event.preventDefault) {  
          event.preventDefault();  
        }  
        event.returnValue = false; 
    } 
}; 
 
if(document.getElementById && document.getElementsByTagName) addEvent(window, 'load', oTest._Init, false); 
 
</script> 
</head> 
<body> 
<table id="maTable"> 
    <tr> 
        <td id="td1_1">Bla Bla 1_1</td> 
        <td id="td1_2">Bla Bla 1_2</td> 
        <td id="td1_3">Bla Bla 1_3</td> 
    </tr> 
    <tr> 
        <td id="td2_1">Bla Bla 2_1</td> 
        <td id="td2_2">Bla Bla 2_2</td> 
        <td id="td2_3">Bla Bla 2_3</td> 
    </tr> 
</table> 
</body> 
</html>