Discussion :

[Al3x]

Bonjour à tous,

Je suis habitué à faire de l'AJAX (ou plutot du AHAH) dans le cadre de développement d'Appli Web, ou les utilisateurs sont sous FF. Donc pas trop de problèmes or cet fois je dois assurer la compatibilité avec IE7...

Et j'ai remarqué le phénomène suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="UpdatedWithAjax">
     <a href="#" onclick="uneFonction(1, 2, 3)">Click</a>
</div>

Lorsque ma page est affichée de façon "synchrone" le comportement onclick ne pose aucun problème à IE or dès que le DIV est mis à jour via une requête AJAX, IE ignore totalement le onClick.

Je sais qu'il est déprécié d'utiliser le onClick au sein même de la balise, mais c'est tout de même plus pratique lorsqu'il y a plusieurs paramètres dans la fonction Javascript....

J'aimerais avoir des avis sur la question, merci d'avance

[E.Bzz]

Bonjour,

Lorsque ma page est affichée de façon "synchrone" le comportement onclick ne pose aucun problème à IE or dès que le DIV est mis à jour via une requête AJAX, IE ignore totalement le onClick.

tout dépend de la manière dont tu traites la réponse d'Ajax :
comment crées-tu le lien (innerHTML ?).
La fonction appelée était déjà déclarée dans la page, ou est-elle également renvoyée par Ajax et intégrée à ce moment là dans la page ?

Enfin, es-tu sûr de n'avoir eu aucune erreur JS lors du traitement des appels Ajax précédents ?

A+

[Al3x]

Merci pour ta réponse !!

Cas d'utilisation typique : Bouton offline/online :

Script Défini et appelé dans l'entête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function online(id, value) {
 
var url = "includes/ajax/toggle.php";
 
var requestVar = { 'id': id, 'value': value };
 
	$('loader').style.visibility = 'visible' ;
 
	var req = new Request.HTML({
		url: url,
		method: 'post',
		data:requestVar,
		update: $('online'),
		onComplete: function(response) {
			$('loader').style.visibility = "hidden" ;
		},
		onFailure:  function(response){
			alert('Une erreur s\'est produite!');
				}
		}).send();
 
};

puis dans le code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<p id="online"><a href="#" onclick="online('id_de_l_enregistrement', '1')">Mettre en ligne</a></p>

Quand on click le script php retourne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" onclick="online('id_de_l_enregistrement', '0')">Mettre hors ligne</a>

Et via la méthode "onComplete" de ma requête AJAX Mootools, on fait un innerHTML dans le <p id="online"> avec le retour de php.

Or une fois que j'ai cliqué plus moyen de le refaire dans IE, le onCLick semble tout simplement ignoré. Si je déplace l'appel de la fonction dans le href de la sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:online('id_de_l_enregistrement'), '0'">Mettre hors ligne</a>

Ca fonctionne nickel : je peux publier/dépublier à l'infini

Et je n'ai pas d'alerte Javascript a lors des appels précédent

[E.Bzz]

La différence entre tes 2 <a href> est que dans le 2° (celui qui fonctionne) tu ne fais vraiment qu'appeler la fonction online()
Dans le 1°, par contre, tu appelles la fonction, puis tu es redirigé sur le href (même si "#" = la page courante).
Aussi essaye quand même

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="online('id_de_l_enregistrement', '0'); return false;">Mettre hors ligne</a>

Ca permettra justement de ne pas faire appelle au href, et donc d'avoir le même fonctionnement...

Et puis je m'arrête là, parce que n'utilisant pas Mootools, je ne peux faire que des suppositions

A+