Plugin non fonctionnel après requête AJAX [Résolu]

[florianlyon]

Bonjour,

Derrière ce titre peu compréhensible se trouve mon problème.

Je possède un page PHP et utilise la librairie qTip pour les infobulles.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
	$(document).ready(function()
	{
	   $('a.filtrage').qtip({
		  position: {
			 corner: {
				target: 'bottomMiddle',
				tooltip: 'topMiddle'
			 }
		  },
		  style: {
			 name: 'light',
			 padding: '5px 5px',
			 width: {
				max: 210,
				min: 0
			 },
			 tip: true
		  }
	   });
}
</script>

Je l'initialise de cette façon et tout fonctionne bien, cependant dans cette page je possède un tableau (situé dans une div et plusieurs liste SELECT afin d'effectuer des filtrage sur ce tableau. Le onchange des SELECT appel une fonction Javascript (comme détaillé dans cet article : http://siddh.developpez.com/articles/ajax/ ) et me retourne mon nouveau tableau. Seulement voilà, la librairie qTip n'est plus active dans la section de code html que me retourne le XmlHttpRequest ... et la dessus.

Comment faire pour ma librairie soit encore active (ou réactivée) après ce changement de contenu ?

Merci d'avance,
Florian

[danielhagnoul]

Bonsoir

C'est normal, le plugin qTip n'a pas connaissance des modifications dynamiques de la page web. Il faut le relancer après la transaction AJAX.

[florianlyon]

Bonjour,

Merci pour ta réponse.

C'est ce que je pensait, mais je ne voit pas comment faire

[SpaceFrog]

ben sur le success de ta requête ajax ... tu refais ce que tu fais dans ton ready pour attribuer le qtip

[florianlyon]

Envoyé par SpaceFrog

ben sur le success de ta requête ajax ... tu refais ce que tu fais dans ton ready pour attribuer le qtip

Est-ce que tu pourrais détailler un peut au niveau code, car je ne vois pas trop comment faire

Merci de ton aide

[SpaceFrog]

C'est tout de même curieux que tu arrives à appliquer le qtip sur le ready et pas sur le success ... c'est pourtant exactement le même code

il est ou ton ajax ?

[florianlyon]

Je suis un peu nouveau dans tout ce qui est AJAX, jQuery c'est pour ça que j'ai un peu de mal par moment.

Tu veux dire qu'il faudrait que j'appel mon code d'instanciation de qTip après mon inner HTML :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
xhr.onreadystatechange = function()
{
    // Si OK
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        listefilm = xhr.responseText;
        // remplir la div du nouveau contenu HTML envoyé par AJAX
        document.getElementById('film').innerHTML = listefilm;
    }
}

[SpaceFrog]

une chose m'echappe ... pourquoi n'utilises tu pas jquery pour ton ajax ???

mais bon ...
on peut rester en js pur

Code :

1
2
3
4
5
6
7
8
9
10
11
xhr.onreadystatechange = function()
{
    // Si OK
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        listefilm = xhr.responseText;
        // remplir la div du nouveau contenu HTML envoyé par AJAX
        document.getElementById('film').innerHTML = listefilm;
    // ici tu relances le code d'attribution de qtip !!!!
 
}

}

[florianlyon]

Pour l'AJAX je verrais pour faire passer ça avec jQuery.

En ce qui concerne le code de qTip je regarde ça se soir en rentrant. Je te tiens au courant de la réussite ou non

[Edit] Merci de ton aide, cela fonctionne.