Salut les zéros !

après des mois de galère, j'ai enfin réussi ce soir à modifier le contenu de mes div gràce au tuto de nesquick et de thunderseb (entre autres).
Un peu dur pour moi étant donné que je ne suis absolument étudiant et encore moins pro de la programmation ! Ca fait tout juste un an que je fréquente le site et j'assume complètement mon niveau de zéro.
Mais je suis tenace et oh victoire ce coup la j'y ai cru.

Rappel des faits :
la page concernée est visible LA.


Je souhaite au clic sur PLUS DE PHOTO de chaque produit, ouvrir le diaporama. Malgré l'étendue de mes ambitions à savoir tout faire moi même, je n'ai pas encore pris le temps de me mettre à l'action script mais comme je suis parti de ZERO justement , j'ai déjà eu fort à faire avec tous les autres langages. J'ai donc chopé ce diapo ICI

Ce diapo prévoit des liens cliquables qui ouvrent les miniatures du flash dans une lightbox.
Mais ces liens pointent vers des ancres présentes dans la page dans une div masquée (id="anchordiv", display:none;) ! Il me faut donc une div par produit avec les ancres correspondantes, de ce type :

<a rel="lightbox[set1]" href="../images/photoContent/nager/le_riolan/ecouges.jpg" id="anchor1_7" class="ancre"></a>

Comme ma page est générée par PHP a partir de ma bd, la liste des ancres doit être elle aussi générée dynamiquement. En PHP c'est facile mais comme il n'y a pas qu'un seul produit sur la page et que la fonction qui place les liens sur le flash est la suivante :

start: function(imageLink) {    

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        // stretch overlay to fill page and fade in
        var arrayPageSize = this.getPageSize();
        $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

        new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

        this.imageArray = [];
        var imageNum = 0;       

        if ((imageLink.rel == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
            
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
        }

elle parcoure tout le document à chaque génération de flash. Les liens ainsi créés sont donc toujours les premiers rencontrés sur la page et ne sont donc jamais les bons.

J'ai donc pensé à utiliser l'implémentation DOM pour modifier côté client une div "anchordiv" unique dont le contenu changerait à chaque clic sur plus de photos selon les variables transmises par newflash() que voici :

function newFlash(nom,sujet,id,dossier) { // créer et afficher un carousel

// 1- rendre visible les div du carousel (diapo : dans lequel se trouve le diapo et overlaydiapo, qui masque l'arrère plan
		
// d'abord envoyer le nom du produit dans la div de commentaire du diapo

  var paragraphe = document.getElementById("detailDossier");
  var old_contenu = paragraphe.firstChild;
  paragraphe.removeChild(old_contenu);
  //Ajout du nouveau contenu
  var texte = document.createTextNode(nom);
  paragraphe.appendChild(texte);

document.getElementById('diapo').style.visibility='visible';
document.getElementById('overlaydiapo').style.visibility='visible';

// 2- modifier liste.xml
// appeler listexml.php avec les variables sujet et id qui va générer le liste.xml mis a jour.

var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente

var sujet = encodeURIComponent(sujet);
var id = encodeURIComponent(id);
var dossier = encodeURIComponent(dossier);

xhr.open("GET", "carousel/listexml.php?sujet="+sujet+"&id="+id+"&dossier="+dossier, true);
xhr.send();


 // fonction getXMLHttpRequest() déclarée plus haut

/////////////////////////// //MODIF DE ANCHORDIV //////////////////////////////////////////////////////////////////////

// d'abord on efface l'ancien contenu

var node = document.getElementById("anchordiv");
var parent = node.parentNode;
parent.removeChild(node);

// puis ajout du nouveau contenu

//1-on recree une div anchordiv vide
var div_anchordiv=document.createElement("div");
div_anchordiv.setAttribute("id","anchordiv");
	
	// recuperation des reponses fournies par la page listeanchor.php et insertion dans 'anchordiv'
		/// on va chercher les données du xml
 							function getDOMImplementation(sUrl, fCallback) {

							var dom;

							if (window.ActiveXObject) {
								dom = new ActiveXObject("Microsoft.XMLDOM");
								dom.onreadystatechange = function() {
									if(dom.readyState == 4) {
										fCallback(dom);
									}
								};
							}
							else if (document.implementation && document.implementation.createDocument) {
								dom = document.implementation.createDocument("", "", null);
								dom.onload = function() { 
									fCallback(dom); 
								}
							}	
							else {
								alert("Votre navigateur ne gère pas l'importation de fichiers XML");
								return;
							}

							dom.load(sUrl);
							}

							function getData(oData) {

							//début de la boucle
							var i=0;
	
							var titreList = oData.getElementsByTagName("ancre");
							var nbre=titreList.length;  // nombre de ancre dans le document

							while (i<nbre)
								{
								var id  = oData.getElementsByTagName('id')[i].firstChild.data;
								var href = oData.getElementsByTagName('href')[i].firstChild.data; 
	
			
								// début de la boucle qui liste les ancres sData
								//on cree les ancres

								var lien = document.createElement("a");

								// condition pour IE 7	
								if(document.all) lien.className='ancre';
								else lien.setAttribute("class","ancre");
								lien.setAttribute("id",id);
								lien.setAttribute("href",href);
								lien.setAttribute("rel","lightbox[set1]");	

								div_anchordiv.appendChild(lien);
								//fin de la boucle
	
	
								i++;

								}

							// fin de la boucle

							}

//
getDOMImplementation('carousel/listancres.xml', getData);


// ENFIN on place la div_anchordiv dans la div_ancres
var div_ancres = document.getElementById("ancres");
div_ancres.appendChild(div_anchordiv);


//3- envoyer la création du flash
swfobject.embedSWF(
	"carousel/Carousel.swf",  // flash file
	"mySlideShowDiv",   // div id
	"600", "400",  // width and height
	"9.0.0",       // flash palyer version
	false,         // autoinstall
    
	{xmlfile: 'carousel/liste.xml'//liste.xml réécrit par listexml.php
										, loaderColor:"#CCCCCC"},  // flashvars

    {bgcolor: "#000000"},  // parameter
    {});                   // attributes

        }

newflash() envoie les variables sur une fonction php dans listexml.php qui réécrit deux fichiers listancres.xml (toutes les ancres à placer dans la div anchordiv) et liste.xml (les photos à pacer dans le flash) à partir du dossier qui contient les photos (grace à GLOB).
je ne vous met que le php, les xml sont générés corrects c'est sur.

listexml.php :

<?php

if (isset($_GET['sujet'])&& isset($_GET['id'])&& isset($_GET['dossier']))
{
$sujet=$_GET['sujet'];
$id=$_GET['id'];
$dossier=$_GET['dossier'];
}

else
{
echo 'erreur de transmission de variables';
}
// assemblage par php du contenu du xml en une seule variable : $xml (header + balises+liste des photos)

$chemin='../../images/photoContent/'.$sujet.'/'.$dossier.'/';
$loop=1;
$images='';
$ancres='';



$head='<?xml version="1.0" encoding="iso-8859-1"?>';
$slideshowopen= '<slide_show>';
$slideshowclose='</slide_show>';
$listancresopen='<listancres>';
$listancresclose='</listancres>';

foreach(glob(''.$chemin.'*.{jpg,jpeg,JPG,JPEG,gif,GIF,png,PNG}',GLOB_BRACE) as $cle)
{
$cle=preg_replace('#\.\./\.\.#', '..',$cle);

$img[$loop]='<photo href="javascript:aclick(\'anchor'.$loop.'_'.$id.'\')" target="_self">'.$cle.'</photo>';
$slideshow=$slideshow.$img[$loop];

$ancres[$loop]='<ancre> <id>anchor'.$loop.'_'.$id.'</id> <href>' . $cle . '</href></ancre>';
$listancres=$listancres.$ancres[$loop];

$loop ++;
}

$slideshow=$head.$slideshowopen.$slideshow.$slideshowclose;
$listancres=$head.$listancresopen.$listancres.$listancresclose;

//echo $xml;
// reste à ouvrir le fichier liste.xml, remplacer son contenu par $xml (par un echo ?) enregistrer et fermer.

$monfichier=fopen ('liste.xml', 'w+');
fseek($monfichier, 0);
fputs($monfichier, $slideshow);
fclose($monfichier);

$monfichier=fopen ('listancres.xml', 'w+');
fseek($monfichier, 0);
fputs($monfichier, $listancres);
fclose($monfichier);

header('Location: '.$_SERVER['HTTP_REFERER'].'');
?>

La fonction Newflash() trouve les fichiers (je n'ai aucun problème ave liste.xml qui marche au poil depuis des mois) mais lorsque qu'elle réécrit la div "anchordiv" elle bug : elle y arrive mais pas du premier coup !! il faut que je clique deux fois sur PLUS DE PHOTOS pour que la div soit mise à jour (contrôlée par FIREBUG). En conséquence le premier clic sur l'image du carousel ne lance pas le lightbox. Ecran noir (div "overlay") et besoin de retourner sur la page pour cliquer une deuxième fois. Cela marche à tous les coups lors du second clic.

Enfin cela ne se produit pas en local , mais seulement sur mon serveur en distant (PHPNUX)

Ce problème intéresserait il des grands ???

remarque :

• désolé d'une part de la longueur de ce post. J'espère donner tous les éléments d'information à celui qui daignera s'y pencher, et dans un français correct.
• toutes mes excuses d'autre part pour la piètre qualité de mon code certainement mal indenté et pas toujours très logique. Je vous rappelle que ma spécialité c'est l'escalade et l'histoire médiévale. Ceci est mon premier vrai site et c'est la première fis que je montre du code à quelqu'un d'autre !!

Par avance merci aux courageux qui releveront le défi. Si vous êtes allé jusqu'ici, c'est que vous en êtes !!!

La solution est simple : il s'agit du paramétrage de L'objet XMLHttpRequest par défaut en synchrone.

var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente

xhr.open("GET", "handlingData.php", true);
xhr.send(null);

Comme le script est long, la div anchordiv n'est pas toujours modifiée avant que la fonction de création du flash ne prélève les ancres.

Solution passer en asynchrone

xhr.open("GET", "handlingData.php", false);

Citation : jabron2407

Solution passer en asynchrone

xhr.open("GET", "handlingData.php", false);

Non, en synchrone, justement.