ajax call , plusieurs renderResponse

Version imprimable

Bonjour,
J'ai un projet E-Commerce (panier , produit ..) . J'ai développé tout ce qui est panier de session etc ..
Mon problème :
lorsque je veux annuler une commande , le panier de session affiché en haut de la page change ( ajax ) et d'autre div a gauche DOIT changer de la même façon .sachant que le panier en haut appartient au layout de la Template mais l'autre div à modifier appartient a une page cart.html.twig heritant du layout .
Mon controlleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
  $panierSession = $this->get('request_stack')->getCurrentRequest()->getSession()->get('panierSession');
        $session = $this->get('request_stack')->getCurrentRequest()->getSession();
        $id = intval($id);
        if ($request->isXmlHttpRequest()) {
            $panierSession->delmoreitem($id);
            $session->set('panierSession', $panierSession);
            $cart_subtotal = 0;
            foreach ($panierSession->viewcart() as $id => $qty) {
                $cart_subtotal = $cart_subtotal + ($this->get('entities')->PriceByProduit($id) * $qty); // float total cart //
            }
            $session->set('carttotal', $cart_subtotal);
              return $this->container->get('templating')->renderResponse('MyAppFrontofficeBundle:client/cart:cartajax.html.twig' , array(
                              'carttotal' => $cart_subtotal, 'panier' => $panierSession->viewcart()
                      ));

Mon problème en bref : j'ai pu rafraîchir une div mais je veux faire ça pour deux div éloignés

Merci d'avance .

10/09/2015, 16h45
kolodz
Pourquoi ne pas séparé les deux mise à jours dans deux appel Ajax différent ?
Logiquement, tu fait 3 appels :
1. Qui modifie la commande (annulation pour le coup)
2. Mise à jour de ta premier zone
3. Mise à jour de ta seconde zone
Que chaque appel gère sa propre zone correctement et retour simplement la zone à mettre à jour / remplacer.

Après, il est possible que je n'ai pas saisi la problématique posé...

Cordialement,
Patrick Kolodziejcyzk.

Merci Patrick ,
j'ai essayé de lancer deux actions après suite à un seul bouton :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
   <a id="{{ allproduit.id }}" class="{{ allproduit.id }}"></a> //// c'est mon bouton
 
    <script type="text/javascript">
        $(function () {
            $("#{{allproduit.id}}").click(function (e) {
                $.ajax({
                    type: 'post',
                    url: "{{path('my_app_frontoffice_supprimerdepanier',{id:allproduit.id} ) }}",
                    data: $(this).serialize(),
                    datatype: "json",
                    cache: false,
                    success: function (data) {
                        $('div#{{allproduit.id}}').hide();                                            
                        $('a#classdropdown-toggle').html(data);
                   //     $('div.widget cart-summary').html(data);
                    }
                });
                return false;
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $(".{{allproduit.id}}").click(function (e) {
                $.ajax({
                    type: 'post',
                    url: "{{path('my_app_frontoffice_supprimershoppingcart',{id:allproduit.id} ) }}",
                    data: $(this).serialize(),
                    datatype: "json",
                    cache: false,
                    success: function (data) {
                     // ] $('div#{#{allproduit.id}#}').hide();                                            
                        $('div.body').html(data);
                    }
                });
                return false;
            });
        });
    </script>

Seule la première action qui se lance et donc une seule div qui se rafraîchie :(

Pas un expert en JavaScript, mais là tu redéfinit l'action sur le onclick... Donc seul le dernier se joue logiquement.

Essai un truc dan ce style:

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
25
26
27
28
29
30
31
32
  <a id="{{ allproduit.id }}" class="{{ allproduit.id }}"></a> //// c'est mon bouton
 
    <script type="text/javascript">
        $(function () {
            $("#{{allproduit.id}}").click(function (e) {
                $.ajax({
                    type: 'post',
                    url: "{{path('my_app_frontoffice_supprimerdepanier',{id:allproduit.id} ) }}",
                    data: $(this).serialize(),
                    datatype: "json",
                    cache: false,
                    success: function (data) {
                        $('div#{{allproduit.id}}').hide();                                            
                        $('a#classdropdown-toggle').html(data);
                   //     $('div.widget cart-summary').html(data);
                    }
                });
                $.ajax({
                    type: 'post',
                    url: "{{path('my_app_frontoffice_supprimershoppingcart',{id:allproduit.id} ) }}",
                    data: $(this).serialize(),
                    datatype: "json",
                    cache: false,
                    success: function (data) {
                     // ] $('div#{#{allproduit.id}#}').hide();                                            
                        $('div.body').html(data);
                    }
                });
                return false;
            });
        });
    </script>

Merci kolodz , j'i constaté que j'ai trés peu reflechi avant de test avec mon script precedant .
J'ai compris ce que tu propose et ça marche à merveille

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
   <script type="text/javascript">
                                        $(function () {
                                            $("#close-btn{{allproduit.id}}").click(function (e) {
   /******************************** **********************************************************************************/
                                                $.ajax({
                                                    type: 'post',
                                                    url: "{{path('my_app_frontoffice_supprimerdepanier',{id:allproduit.id} ) }}",
                                                    data: $(this).serialize(),
                                                    datatype: "json",
                                                    cache: false,
                                                    success: function (data) {
                                                        $('div#{{allproduit.id}}').hide();
                                                        //  $('div#NOTajax').hide();
                                                        $('a#classdropdown-toggle').html(data);
                                                      //    $('div.widget cart-summary').html(data);
                                                         }
                                                        });
                                               //          return false;
    /******************************** ***************************************************************************/
                                                $.ajax({
                                                    type: 'post',
                                                    url: "{{path('my_app_frontoffice_supprimerdeshoppingcart',{id:allproduit.id} ) }}",
                                                    data: $(this).serialize(),
                                                    datatype: "json",
                                                    cache: false,
                                                    success: function (data) {
                                                        $('div#{{allproduit.id}}').hide();
                                                        //  $('div#NOTajax').hide();
                                                     //   $('a#classdropdown-toggle').html(data);
                                                        $('div.body').html(data);
                                                         }
                                                        });
                                                  //       return false;                                                        
     /********************************** ***********************************************************************************/
                                            }
                                            );
                                        });
                                    </script>