Rafraichissement Ajax / Lightbox

Version imprimable

05/04/2008, 10h15
Adau72

Rafraichissement Ajax / Lightbox

Bonjour à tous, :D

Mon problème concerne une page Asp.net avec de l'Ajax mais je pense que mon problème provient de l'Ajax et c'est pourquoi je poste ici.

Mon problème est assez simple :
-J'ai une page aspx qui possède un UpdatePanel.
-Dans cet UpdatePanel, j'ai des LinkButton et aussi des balises <a></a> :

Les balises <a></a> permettent de lancer une lightbox (célébre script lightbox.js), affichant non pas une image mais une div contenant différents champs textes à remplir.

voici un exemple d'une de ces balises:
<a href="#box01" rel="box01" class="lbOn"></a>

Lorsque j'accède la première fois à cette page, les balises <a></a> fonctionnent très bien : la lightbox apparait correctement.

MAIS : lorsque l'UpdatePanel de la page est mis à jour par l'Ajax, un clic sur le lien n'a plus d'effet.

Je pense que le problème vient du javascript lightbox.js et d'une incompatibilité avec Ajax ...(perte des evenements inscrits ou quelque chose du genre), mais mes compétences me font défaut ... :roll:

Pour aide voici le script :
http://www.auvrayceramique.free.fr/js/lightbox-div.js

Contributeurs, si l'un de vous avait la solution miracle !?
Thanxs a lot !
05/04/2008, 10h59
le_chomeur

fais une simple vérification du code généré APRES ton appel ajax ...
avant => récupère dans une variable le innerHTML
avec un bouton , lance ta méthode , récupère le innerHTML après et fait une comparaison .. si tu n'as pas d'erreur javascript , c'est que ton code source a forcément changé et que le listener d'évènement de ligthbox ne peux plus les interpreter

Hello,

Finalement le problème était assez simple:

Après appel de l'ajax les liens vers le javascript semblaient "cassés".

J'ai mis le code js directement dans la page, et non pas dans un fichier séparé et tout fonctionne correctement avant comme après l'AJAX...

De plus, pour faire ce que j'ai à faire j'ai banni la lightbox qui est trop compliquée et lourde à gérer.

J'ai trouvé un autre script :

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
 
 
var actualposition = null;
function showmodal(divtoshow)
{
	actualposition = document.documentElement.scrollTop;
	//var modbox = document.getElementById('modbox');
	var modbox = document.getElementById(divtoshow);
	var shad = document.getElementById('shad');
	document.body.style.overflow = 'hidden';
	//modbox.innerHTML = document.getElementById(divtoshow).innerHTML;
	shad.style.display = "block";
	modbox.style.display = "block";
    modbox.style.left = ((largeur_fenetre() - modbox.style.width.replace('px','')) / 2) + 'px';
	document.getElementsByTagName('html')[0].style.overflow = 'hidden';
	//window.scrollTo(0,actualposition);     
	window.scrollTo(0,0);
}
/****************************************************************************************************************/
function largeur_fenetre()
{
	if (window.innerWidth) return window.innerWidth;
	else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
	else return 0;
}
/****************************************************************************************************************/
function closemodal(divtoclose)
{
	//var modbox = document.getElementById('modbox');
	var modbox = document.getElementById(divtoclose);
	var shad = document.getElementById('shad');
	//modbox.innerHTML = '';
	//modbox.style.width = '';
	//modbox.style.marginLeft = '';
	modbox.style.display = 'none';
	shad.style.display = 'none';
	document.body.style.overflow = '';
	document.getElementsByTagName('html')[0].style.overflow = '';
	window.scrollTo(0,actualposition);
}

En tout cas encore merci pour ta réponse.

PS: j'avais fait ce que tu me conseillais, mais aucune diff n'apparaissait.