2016-05-06 22 views
1

私は電子商取引のWebプロジェクトで作業していますが、問題があります。実際には 商品詳細ページがあり、商品ごとに色がありますajaxで色に合った画像を表示しようとしています。 「ajax呼び出し後にイメージが表示されない[symfony2]

 <a class="color1" onclick="changecolor('{{i.color}}', {{i.idproduit.idproduit}});" style="background-color: {{i.color}}" href="javascript:void(0);"></a> 
... 
    <script> 
      function changecolor(color, idprod) { 

       var idprod = idprod; 
       var color = color; 
       var DATA = 'idprod=' + idprod + '&color=' + color; 
       $.ajax({ 
        type: "POST", 
        url: "{{ path('change_product_color')}}", 
        data: DATA, 
        cache: false, 
        success: function (data) { 
         $('#resultats').html(data); 

        } 
       }); 
       return false; 
      } 

     </script> 

「小枝」:私は、色をクリックしたとき 、私は色を取得し、Ajaxの機能を起動するには

これは私のコードです:これは、製品のページですchangecolor.html.twigコントローラーで」

<div id="resultats" class="tovar_view_fotos clearfix"> 
    <div id="slider2" class="flexslider"> 
     <ul class="slides"> 
      <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route1', {'id': pimg.idimage})) }}" alt="" /></a></li> 
      <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route2', {'id': pimg.idimage})) }}" alt="" /></a></li> 

     </ul> 
    </div> 
    <div id="carousel2" class="flexslider"> 
     <ul class="slides"> 
      <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route1', {'id': pimg.idimage})) }}" alt="" /></a></li> 
      <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route2', {'id': pimg.idimage})) }}" alt="" /></a></li> 

     </ul> 
    </div> 
</div> 

"アクション"

public function changeColorAction() { 

     $request = $this->container->get('request'); 
     if ($request->isXmlHttpRequest()) { 
      $id=$request->request->get('idprod'); 
      $c=$request->request->get('color'); 
      $em = $this->getDoctrine()->getManager(); 
      $produit = $em->getRepository('WelcomeBundle:Produit')->find($id); 
      $stock = $em->getRepository('WelcomeBundle:Stock')->find($produit->getIdstock()); 
      $boutique = $em->getRepository('WelcomeBundle:Boutique')->find($stock->getIdboutique()); 
      $colors = $em->getRepository('WelcomeBundle:Produitimage')->findBy(array('idproduit' => $id)); 
      $sizes = $em->getRepository('WelcomeBundle:Produitsize')->findBy(array('idproduit' => $id)); 
      $query5 = $em->createQuery("SELECT m FROM WelcomeBundle:Produitimage m WHERE m.color='$c' AND m.idproduit='$id'"); 
      $pimg = $query5->getResult(); 
      $pimg1 = $pimg[0]; 

      return $this->container->get('templating')->renderResponse('TMClientBundle:Client:changecolor.html.twig', array(
         'product' => $produit, 
         'sizes' => $sizes, 
         'colors' => $colors, 
         'boutique' => $boutique, 
         'pimg' => $pimg1 
      )); 
     } else { 
      return $this->productPageAction($id); 
     } 
    } 

問題は、このイメージで記述されています

コードを検査した後、画像があるが、表示されません!

答えて

0

dom/javascriptの問題です。

#resultatsは何を参照していますか?

あなたのajaxの結果には何が含まれていますか?

たぶん、あなたが作成/ IMGタグを交換してみてください:

var img = document.createElement("img"); 
img.src = "images/"+your_image; 
document.getElementById('resultats').appendChild(img); 

は、以前のappendを削除するか、単に使用することができSHUREう:

document.getElementById("your_image_el_id").src="your/image_path.jpg"; 
+0

resultas含まに含まれるdiv要素のIDですtwig "changecolor.html.twig"このファイルのコードを追加するようにパブリケーションを更新します。 –

+0

ajaxリクエストからデータが返されるのは何ですか?スライダー? –

+0

ajaxの結果を投稿できますか? –

関連する問題