11548 sujets

JavaScript, DOM et API Web HTML5

[Presque résolu] Conflits entre 2 scripts sur ma page

Bonjour,

J'ai créé 2 scripts pour mon site. Le premier s'occupe d'ajouter une classe à la ligne du tableau qui est survolée. Le deuxième permet d'ouvrir un popup quand on clique sur une ligne.

Ces deux scripts sont séparés sur 2 pages différentes, pour pouvoir utiliser soit l'un, soit l'autre, soit les 2.

Ils fonctionnent parfaitement individuellement mais quand j'essaie de mettre les 2 ensemble, seul le deuxième est exécuté.

Peut-il y avoir un conflit entre les 2 scripts? Qu'est-ce qui pourrait poser problème?
Modifié par <nicolas> (22 Oct 2007 - 11:29)
Voici mes 2 scripts:

popup.js
/*******************************************/
/******  Gestionnaire de popup (DOM)  ******/
/******  Original script by koala64   ******/
/*******************************************/

// Création d'un objet
var o = new Object;

// Création d'une variable globale
var oNewWin = null;

// Propriétés Link de l'objet
o.Link =
{
	// Gestionnaire des événements onclick pour chaque ligne du tableau
	ClickHandler: function() {		
		// On récupère l'ensemble des lignes dans un tableau puis
		// on parcourt le tableau. Si une ligne possède une classe 'line',
		// on lance la fonction popup.
		var oLines = document.getElementsByTagName('body')[0].getElementsByTagName('tr');
		for( var i = 0 ; i < oLines.length ; i++ )
			if( oLines[i ].className == 'line' ) {
				oLines[i ].onclick = o.Popup.__Open;
				oLines[i ].style.cursor = 'pointer';
			}
	},
}

// Propriétés Popup de l'objet
o.Popup =
{
	// Méthode d'ouverture de la popup
	__Open: function() {
		// Si la popup n'existe pas, on en crée une avec le lien concerné puis
		// on annule l'activation du lien dans la fenêtre principale.
		if(!oNewWin || oNewWin.closed) {
			var target = this.getElementsByTagName('a')[0].href;
			oNewWin = window.open(target, '', 'top='+((screen.height/2)-275)+', left='+((screen.width/2)-300)+', width=600, height=550, resizable=yes' );
			return false;
		}
		
		// Si la popup existe et qu'on clique sur une autre ligne possédant une classe 'line',
		// on passe l'url à la popup, on lui redonne le focus puis on annule l'activation du
		// lien dans la fenêtre principale.
		else if(oNewWin && this.className.indexOf('line')!=-1) {
			var target = this.getElementsByTagName('a')[0].href;
			oNewWin.location.href = target;
			oNewWin.focus();
			return false;
		}
		
		// Pour les autres cas, on active le lien dans la fenêtre principale.
		else {
			return true;
		}
	},
}

// Propriétés Script de l'objet
o.Script =
{
	// Initialisation de l'objet
	Init: function() {
		o.Link.ClickHandler();
	}
}

// Chargement de l'objet au lancement de la page.
window.onload = o.Script.Init;

lightning.js
/****************************************************/
/******  Surbrillance des lignes d'un tableau  ******/
/****************************************************/

// Création d'un objet
var p = new Object;

// Propriétés Over de l'objet
p.Over =
{
	// Gestionnaire des événements onmouseover et onmouseout pour chaque ligne du tableau
	OverOut: function() {		
		// On récupère l'ensemble des lignes dans un tableau puis
		// on parcourt le tableau. Si une ligne possède une classe 'vinsDetails',
		// on lance la fonction Lightning.
		var pLines = document.getElementsByTagName('body')[0].getElementsByTagName('tr');
		for( var i = 0 ; i < pLines.length ; i++ )
			if( pLines[i ].className == 'line' ) {
				pLines[i ].onmouseover = p.Lightning.__Colore;
				pLines[i ].onmouseout = p.Lightning.__Uncolore;
			}
	},
}

// Propriétés Lightning de l'objet
p.Lightning =
{
	// Méthodes de surbrillance des lignes
	__Colore: function() {
		this.className += ' lightning';
	},
	__Uncolore: function() {
		this.className = this.className.replace(/ lightning/, '');
	},
}

// Propriétés Script de l'objet
p.Script =
{
	// Initialisation de l'objet
	Init: function() {
		p.Over.OverOut();
	}
}

// Chargement de l'objet au lancement de la page.
window.onload = p.Script.Init;

Et dans ma page html:
<script type="text/javascript" src="scripts/lightning.js"></script>
<script type="text/javascript" src="scripts/popup.js"></script>

Modifié par <nicolas> (21 Oct 2007 - 14:00)
Personne n'a une idée..?

Est-ce que je devrais utiliser le même objet pour les 2 cas si ces scripts concernent les mêmes éléments?

Ou bien est-ce que le problème peut venir du window.onload? Y'a-t'il un autre moyen?

Merci de votre aide.
Merci beaucoup.

EDIT: En fait j'ai encore un problème, mes scripts ne fonctionne pas sous IE... Smiley decu Est-ce que quelqu'un voit une propriété non reconnue?
Modifié par <nicolas> (22 Oct 2007 - 11:29)
<nicolas> a écrit :
EDIT: En fait j'ai encore un problème, mes scripts ne fonctionne pas sous IE... Smiley decu Est-ce que quelqu'un voit une propriété non reconnue?

Non.

Quelle erreur obtiens-tu ? As-tu un exemple en ligne ?
Voici le code complet de ma page de test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
table tr.lightning		{ background-color:#ff0; }
</style>
	<script type="text/javascript"><!--

// Création d'un objet
var l = new Object;

// Propriétés Over de l'objet
l.Over =
{
	// Gestionnaire des événements onmouseover et onmouseout pour chaque ligne du tableau
	OverOut: function() {		
		// On récupère l'ensemble des lignes dans un tableau puis
		// on parcourt le tableau. Si une ligne possède une classe 'line',
		// on lance la fonction Lightning.
		var lLines = document.getElementsByTagName('body')[0].getElementsByTagName('tr');
		for( var i = 0 ; i < lLines.length ; i++ )
			if( lLines[i ].className == 'line' ) {
				lLines[i ].onmouseover = l.Lightning.__Colore;
				lLines[i ].onmouseout = l.Lightning.__Uncolore;
			}
	},
}

// Propriétés Lightning de l'objet
l.Lightning =
{
	// Méthodes de surbrillance des lignes
	__Colore: function() {
		this.className += ' lightning';
	},
	__Uncolore: function() {
		this.className = this.className.replace(/ lightning/, '');
	},
}

// Propriétés Script de l'objet
l.Script =
{
	// Initialisation de l'objet
	Init: function() {
		l.Over.OverOut();
	}
}

window.onload = l.Script.Init;
//--></script>
</head>

<body>
<table width="200">
  <tr class="line">
    <td>8zgb</td>
    <td>utgv</td>
    <td>vzu</td>
  </tr>
  <tr class="line">
    <td>vt</td>
    <td>vct</td>
    <td>vr</td>
  </tr>
</table>
</body>
</html>


Ca marche bien sur FF, mais malheureusement pas sur IE6 et IE7.
Merci beaucoup pour JsLint. Mes scripts comportaient effectivement beaucoup d'erreurs de syntaxe.

Il me reste encore une erreur que je ne comprends pas:

Problem at line 6 character 13: Use the object literal notation {}.
var l = new Object();
Modifié par <nicolas> (24 Oct 2007 - 19:40)
<nicolas> a écrit :
Il me reste encore une erreur que je ne comprends pas:

Problem at line 6 character 13: Use the object literal notation {}.
var l = new Object();

Il te suggère d'utiliser un littéral objet plutôt que le constructeur, ce qui est plus concis :
var l = {};
Sujet clos
Aller à