Manipuler dans JS objet Php/json à travers twig
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:
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:
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:
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:
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 !
