gestion des évenements

Version imprimable

08/08/2007, 22h40
Empty_body

gestion des évenements

Salut,
J'ai fait un petit site qui utilise une page d'index avec une div qui contient le menu et une seconde dans laquelle viennent s'inclure les différentes pages qui constituent le site. Comme vous le devinez, une fonction js fait appel à un fichier ajax.php qui contient différentes lignes type "require mapage.php". Parmi ces page, j'aimerais em mettre une qui contient du JS elle aussi et ce js est appelé via un "body onload = 'mafonction()'". Malheureusement, je ne sais pas comment faire pour que ça fonctionne... Comment faire pour que la fonction se charge au moment où le contenu de la page est envoyé dans la div? Quelqu'un sait me mettre sur la voie? Merci...
09/08/2007, 09h31
E.Bzz

Bonjour,
la syntaxe classique est

Code:

window.onload=ta_fonction;

mais si tu dois lui passer des paramètres, il faudra utiliser la syntaxe

Code:

window.onload=function(){ta_fonction(param1,param2);}

A+
09/08/2007, 18h12
Empty_body

window.onload c'est pour quand on charge un page complète, non? Ici, je me limite à charger un morceau de page dans une div.Et c'est au chargement du code dans cette div que j'aimerais que la fonction js se lance. Mais merci quand même...
10/08/2007, 09h00
E.Bzz

Citation:

Envoyé par Empty_body

Ici, je me limite à charger un morceau de page dans une div.Et c'est au chargement du code dans cette div que j'aimerais que la fonction js se lance.

Ben ... tu dois "charger" ton div à l'aide d'une fonction JS (et certainement Ajax), non ?
Tu n'as qu'à appeler ta_fonction() à la fin de ce script ...

Ou alors, donne les éléments qui nous manquent ;)

A+

Effectivement, je détaille pas grand chose... Mais je vais me rattrapper...
Pour "charger" ma page dans une div, j'utilise le script suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('page').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}

Ajax.php contient une série de if else et des requiert me permettent de sélectionner la page que je vais charger en fonction du paramètre transféré.

Le script que je cherche à lancer "onload" de la div est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function montrer_image(image,titre) {
  Lightbox.show(image, titre);
}
var effetCouleur = new Fx.Color('contenu', 'background-color');
function afficher(prenom) {
	new ajax('recuperer_photo_lightbox.php',{postBody:'prenom='+prenom, onComplete: photoFinished, update: 'contenu',method: 'post'}).request();
}
function photoFinished(request){
      effetCouleur.fromColor('#426cc2');
      var myTips = new Tips($ES('a','contenu'), {
      maxTitleChars: 50, //des titres avec une longueur max de 50
      maxOpacity: .85, //un peu de transparence
      className: 'infobulle' //quel classe CSS pour notre petite infobulle
  });
}
var stretchers = $$('div.accordeon');
stretchers.each(function(item){
	item.setStyles({'height': '0', 'overflow': 'hidden'});
});
window.onload = function(){ 		
	var togglers = $$('h4.toggler'); 
	var bgFx = []; 
	togglers.each(function(toggler, i){
		toggler.defaultColor = toggler.getStyle('background-color'); 
		bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
	});
	var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,	
		onActive: function(toggler, i){
			bgFx[i].toColor('#426cc2');
			toggler.getFirst().setStyle('color', '#fff');
		},
		onBackground: function(toggler, i){
			bgFx[i].clearTimer(); //quand un element n'est actif
			toggler.setStyle('background-color', toggler.defaultColor);
			toggler.getFirst().setStyle('color', '#222');
		}
	});
	function checkHash(){
		var found = false;
		$$('h4.toggler a').each(function(link, i){
			if (window.location.hash.test(link.hash)){
				myAccordion.showThisHideOpen(i);
				found = true;
			}
		});
		return found;
	}
	if (!checkHash()) myAccordion.showThisHideOpen(0);
};

Ce code appelle une fonction de la librairie Mootools.
Malheureusement, comme précisé plus haut, je n'arrive à rien... Quelqu'un voit la solution?

15/08/2007, 11h57
Empty_body

Bonjour,

Après encore quelques heures, je suis toujours bloqué... J'ai essayé de suivre le conseil de E.Bzz et d'appeler la fonction à la fin de mon script ajax mais je n'y arrive pas. Je pense que c'est la ligne

Code:

window.onload = function()

que je dois renommer en

Code:

function maFonction()

et que je dois l'appeller juste après ceci

Code:

xhr.open("GET","ajax.php?page="+page,true);

mais ça ne fonctionne pas... Quelqu'un voit où je m'égare? Merci d'avance...
15/08/2007, 20h16
Empty_body

Hello...

Après quelques recherches supplémentaires, j'ai presque réussi... Le script que j'essaie de mettre en place est destiné à mettre en place une galerie photo avec rafraichissement en JS. J'ai déjà les miniatures qui apparaissent mais je sèche toujours pour le reste...