Fancybox - Ajax

[yeste64]

Bonjour à tous, voici mon problème :

Ma page web est constituée d'un menu sur la gauche, listant des bons de commandes. Lorsque je clique sur l'un d'entre eux, une requête ajax est effectuée et le résultat s'affiche au centre de l'écran. Ainsi, à chaque fois que je clique sur un bon de commande, ses détails s'affichent au centre de l'écran.

Cependant, je voudrais que, lorsque je clique sur un élément du centre de l'écran, une fancybox s'ouvre.

Tout cela marche parfaitement ... seulement pour le premier bon de commande sélectionné. A partir du moment où je clique sur un second bon de commande sur la gauche, la fancybox que j'essaie d'ouvrir à partir du contenu au centre ne s'ouvre pas. Idem si je clique sur un premier puis un second bon sans avoir ouvert aucune fancybox..

En somme, dès que le contenu central de la page est actualisé une deuxième fois via Ajax, les fancybox ne veulent plus s'ouvrir.. Je le vois comme ça.

En espérant trouver de l'aide.
Merci d'avance à tous ceux qui prendront la peine de réfléchir dessus!

PS : j'ai été obligé de mettre le code JS de ma fancybox (y compris les fichiers à inclure) dans le fichier Ajax et non dans la page d'accueil dont le contenu est modifié en Ajax, ce que je trouve étrange...

[Sharcoux]

C'est difficile de t'aider comme ça. Essaye d'installer firebug. Tu pourras inspecter les erreurs rencontrées et l'état exact de toutes tes variables javascript.

Si tu n'arrives toujours pas à régler le problème, donne-nous plus de détails sur ce que dit firebug

bonne chance

[yeste64]

Merci de ta réponse. Je suis sous mac et safari. J'ai bien le débugger mais je ne sais pas trop m'en servir.. Comment inspecter l'état du javascript en temps réel ?

[Sharcoux]

firebug doit fonctionner dans safari normalement.

Il faut regarder l'onglet DOM pour avoir l'état exact du javascript.

Si tu veux connaître l'état à un moment particulier tu peux faire dans ton code :

Code :

trucmachin = monObjetAEtudier; alert("stop");

monObjetAEtudier peut aussi être this.
Tu le trouveras ensuite dans l'onglet DOM soit dans les premières variables de la racine, soit dans celles de window.

N'oublie pas le bouton "actualiser" de l'onglet DOM. Ca peut servir

[yeste64]

Lorsque je reclique sur un lien censé ouvrir une fancybox et qu'il ne le fait pas, j'obtiens ceci dans la console :

"TypeError: Result of expression 't' [undefined] is not an object."

Et la ligne indiquée ne correspond à rien de censé dans le code. Si je supprime la partie de code concernée d'après le debugger, l'erreur s'affiche quand même mais à un autre endroit du code (elle est indiquée dans la ligne d'un commentaire -_- )

[Sharcoux]

oui, firebug fait parfois un peu de la merde dans la localisation du problème. As-tu une variable t dans ton code, ou utilises-tu un librairie externe?

Tu peux aussi utiliser firebug pour faire du pas à pas. Dans script, tu choisis une ligne de code un peu en amont du problème. Ensuite tu fais les actions qui génèrent ton bug. Firebug va bloquer l'execution au niveau de la ligne où tu as cliqué. Ensuite tu n'as plus qu'à cliquer sur la première flèche jaune pour voir tous les appels javascript.

Dans la fenêtre de droite tu as l'état de toutes les variables.

Bonne chance

[yeste64]

J'utilise une librairie externe : fancybox. Comment je pourrais faire dans ce cas là ? :/

[Sharcoux]

Dans ce cas là, essaye de nous donner ton code. Essaye de nous faciliter la tâche en enlevant tout ce qui ne concerne pas le problème. Ne garde que ce qui peut nous intéresser

[yeste64]

Dans ma page d'accueil, voici le script qui me permet de lancer la requete ajax lors d'un click sur un onglet (soit une commande) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#gauche li").click(function() { 	//Lors d'un clic sur un onglet
  $("#gauche li").removeClass("selected"); //on supprime toutes les classes "selected"
  $(this).addClass("selected"); //on ajoute la classe "selected" à l'onglet sélectionné
 
  $field = $(this);
  $('#centre').html(''); // on vide les resultats
  $('#loader2').remove(); // on retire le loader
 
  // on envoie la valeur recherché en POST au fichier de traitement
  $.ajax({
    type : 'POST', // envoi des données en GET ou POST
    url : 'scripts/ongletsAjax.php' , // url du fichier de traitement
    data : 'contenu='+$(this).attr('class') , // données à envoyer en  GET ou POST
    beforeSend : function() { // traitements JS à faire AVANT l'envoi
      $('#centre').after('<center><img src="images/loader2.gif" alt="loader" id="loader2" /></center>'); // ajout d'un loader pour signifier l'action
    },
    success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
      $('#loader2').remove(); // on enleve le loader
      $('#centre').hide().html(data).fadeIn(); // affichage des résultats dans le bloc
    }
  });
  return false;
});

Le contenu au centre de ma page s'actualise donc selon ce qui est décrit dans le fichier ongletsAjax.php.
Dans ce fichier ongletsAjax.php, se trouvent plusieurs liens ouvrant chacun une fancybox (librairie externe utilisant jquery).

Mon problème : lorsque je clique une première fois sur un onglet, le centre de mon écran s'actualise grâce à ajax, je clique sur un lien, et ma fancybox s'ouvre correctement. Cependant, si je veux continuer en cliquant sur un autre onglets puis à nouveau sur un lien du centre de la page, la fancybox ne s'ouvre plus.

J'ai l'impression que dès qu'une deuxième requête ajax est effectuée, les fancybox sont désactivées. En effet, un moteur de recherche en ajax se trouve aussi sur ma page, et si j'effectue une recherche (et donc une requete ajax) puis ensuite décide de consulter un onglet, là non plus mes fancybox ne fonctionnent pas..

J'espère avoir éclairci le problème..

Voici le bout de code me permettant de faire ouvrir mes fancybox dans le fichier ongletsAjax.php :

Code :

1
2
3
4
5
6
7
8
$.fancybox({
  'type': 'iframe',
  'padding': 0,
  'width': 850,
  'height': 430,
  'scrolling': 'no',
  'href': 'noTracable.php'
});

[yeste64]

Il me semble avoir trouvé la réponse, seulement je n'arrive toujours pas à résoudre mon problème :

"To fix this error, simply move your calls to shadowbox.js and shadowbox.init() to either the bottom of the <body> tag, or below the <body> tag. Both locations should work as opposed to inside the <head> tag."

J'ai trouvé ça sur le forum de shadowbox, ça doit être une librairie similaire à fancybox.

Si je comprends bien, il ne faut pas déclarer la fancybox après la balise <body> ? Et moi, vu que cela se fait dans le fichiers ajax, et que celui-ci met à jour une div de ma page d'accueil, le contenu du fichier ongletsAjax.php (et donc les liens vers les fancybox) se trouve APRES ma balise <body> dans ma page d'accueil.. C'est de là que doit venir le problème.

Mais comment faire pour déclarer les fancybox dans la page d'accueil, si je le fais dans la page d'accueil, elles ne marchent carrément plus du tout!