Discussion :

[zanteskuken]

Bonjour à tous,

Le titre pourrai sembler hasardeux alors je vais bien expliquer.

ça me parais pourtant tout simple à faire mais je pèche...

Mon but est de créer un petit carousel. On click sur droite-gauche sur une liste d'image et apparait en format élargit l'image pointée.

Le code :

Js / Symphony 2


Ma fonction Php :

Code php :

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
24
public function updatePicksAction(){
	try{
		$user = $this->container->get('security.context')->getToken()->getUser();
		// Et pour vérifier que l'utilisateur est authentifié (et non un anonyme)
		if( ! is_object($user) ){
			throw new AccessDeniedException('Vous n\'êtes pas authentifié.');
		}
		$offer = $user->getCompte()->getOffre();
		$listImg = $this->getDoctrine()
			->getRepository('PldOfferBundle:OffreImage')
		    	->findByOffre($offer->getId());
		if($listImg != null){
			$img = $listImg;
		}else{
			$img=null;
		}
		$logger->info('UpdateAccountController - updatePicks ');
	}catch (\Exception $e){
		$info = $e;
		$logger->err('UpdateAccountController - updatePicks : '.$e);
	}
	return $this->render('PldAccountBundle:Compte:updatePicks.html.twig',
		(array('contenu' => $img)));
}

Ma page Twig qui interprétera la valeur :

Code html :

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
{% if contenu %}
<ul id="carrousel" style="list-style-type: none;height:75px;overflow:hidden; max-width:500px; margin:0px; padding:0px;">
	<div class="carrousel-conteneur" id="carrousel-conteneur" style="height:75px; float:left; margin:0px; padding:0px;">
	{% for co in contenu %}
		<li style="display: inline;float:left; margin:0px; width:100px; padding:0px;">
			<img src='{{ asset(co.imagefile) }} title='{{ co.fileName }}' 
				id='{{ co.id }}' style="height:75px; margin:0px">
		</li>
	{% endfor %}
	</div>
</ul>
{% else %}
<ul id="carrousel" style="list-style-type: none;height:75px;">
 	<div class="carrousel-conteneur" id="carrousel-conteneur" style="height:75px; float:left; ">
	</div>
 </ul>
{% endif %}

Cela fonctionne, j'affiche mes images, ok pas de souci.

Maintenant le Problème :

JS : j'aimerai manipuler ma liste d'image "Contenu", pour sélectionner l'image dans mon tableau et l'envoyer en source "src" de mon image Élargie.

J'essaye déjà quelques tests

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function cRight(evt)
{
arr =  {{ contenu }};
	alert("la "+arr.length);
	if({{ contenu|length }} >= (posit + 1))
	{
		posit++;
		alert("ici "+arr);
		for (i in arr) {  
			alert("name : "+arr[i]);
	    } 
$("#img_panel").css("src", ''+arr[posit]['imagefile']+'' );
}
}

- La taillede "arr" vaut 1 (au lieu de 11)
- Le prochain alert affiche "ici function Array() {
[native code]
}"
- On ne rentre pas dans le "for"

Je me dis que ça aurai été trop simple -_-.

J'essaye en passant par du Jason, me disant que javascript doit pas capter l'objet php.

Coté Php je retourne donc en valeur à la place :

Code :

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

1
2
3
4
5
6
 
...
...
$jsonImg = json_encode($img);
return $this->render('PldAccountBundle:Compte:updatePicks.html.twig',
					(array('contenu' => $jsonImg)));

Hors du coup, mes images ne s'affiche plus coté client, pourtant si je ne m'abuse, la syntaxe est là bonne pour ma boucle (for) est l’accès au donnée ("co.fileName"). Je n'ai pas à changé quoi que ce soit.

Et ma fonction JS

J'ai en résultat :
- Taille = 11
- alert : ici [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
- Puis l'itération des objets donne : [object Object]

Et si je veut une valeur : arr[i].fileName j'ai en résultat : undefined

Donc bon, je me perd et ne saisis plus trop bien.

Avant de venir j'ai trouvé sur ce site :
http://code18.blogspot.fr/2009/01/co...p-en-json.html
la même manipulation que j'avais pensé pourtant, quels sont mes erreurs ?
Ais-je intérêt à m'y prendre d'une autre façon ou bien ?

Merci d'avance !

[Bovino]

Déjà, ta structure HTML est incorrecte... tu ne peux pas mettre une balise <div> comme enfant direct d'une balise <ul>.

D'autre part, il y a des id dupliqués dans ton code HTML, c'est pas bien.

Il y a aussi des attributs non fermés.

Tant que ton code HTML ne sera pas correct, il sera réorganisé par le moteur HTML et ne pourra que te poser des problème avec JavaScript...

[zanteskuken]

Merci de cette réponse.
Oui en effet je viens de voir ça, ce n'est pas très associatif element inline et block.
Plus judiciable de le mettre dans la balise <li>, mais je l'ai enlevé je n'avais plus besoin de ce div.

Mise à part, Comment Html pourrait planter ma fonction javascript ?

Au niveau de l'interpréteur je comprends mais je ne pensais pas au niveau de la structure.

Le problème initiale est toujours présent bien sur.