IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Manipuler dans JS objet Php/json � travers twig


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre confirm�
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    85
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2008
    Messages : 85
    Par d�faut 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 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 !

  2. #2
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    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...
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirm�
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    85
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2008
    Messages : 85
    Par d�faut
    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.

Discussions similaires

  1. [PHP-JS] Manipuler en Javascript un tableau dans un formulaire PHP
    Par Bouillons2 dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 12/11/2010, 10h10
  2. Objet php dans fichier js
    Par vladimire dans le forum G�n�ral JavaScript
    R�ponses: 1
    Dernier message: 22/02/2010, 11h12
  3. Manipulation d'un objet JSON
    Par ordiminnie dans le forum G�n�ral JavaScript
    R�ponses: 7
    Dernier message: 21/09/2009, 16h48
  4. Probl�mes dans la manipulation de l'objet "axes"
    Par Bloodista dans le forum Interfaces Graphiques
    R�ponses: 2
    Dernier message: 08/06/2009, 18h00
  5. R�ponses: 2
    Dernier message: 30/03/2009, 14h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo