Concat variable in ajax symfony

Question

i want to append a table row after i press on add to cart but the probleme is in the table row id i want to do something like this

what i want to append after button press

         function ajouter(idd, prix)
                                {
                                    var test = idd;
                                    var urlEdit = "{{ 
                path('ajouterAuPanier', { 'id': "id" }) }}";
                                    urlEdit=urlEdit.replace("id",test);
                                    $.ajax({
                                        method: 'POST',
                                        url: urlEdit,
                                        success: function(d)
                                        {
                                            if(d.msg == "success")
                                            {
                                                i++;
                                            alert("Item Added");
                                            var prixTotal = parseInt(document.getElementById('prixTotal').innerText);
                                            prixTotal = prixTotal + prix;
                                            document.getElementById('prixTotal').innerText = prixTotal;
                                               var id = {{ panier.id|json_encode() }};
                                                var table = document.getElementById("customers");
                                                var row = table.insertRow();
                                                var cell1 = row.insertCell(0);
                                                var cell2 = row.insertCell(1);
                                                var cell3 = row.insertCell(2);
                                                cell1.innerHTML =document.getElementById(idd+""+idd).innerHTML;
                                                cell2.innerHTML ="<div id="+id+id+id+">1</div><input type=\"submit\" name=\"+\" value=\"+\" style=\"margin-top: -11%;margin-left: 10%;\" onclick=\"updatePlus(i)\">" +
                                                    "<input type=\"submit\" name=\"-\" value=\"-\" style=\"margin-top: -19%;margin-left: 31%;\" onclick=\"updateMinus(i) \">\n";
                                                cell3.innerHTML ="<div id="+id+id+">"+prix+"</div>";
                                           // document.getElementById('cartt').innerHTML +="<div><td> PRODUIT AJOUTE </td><td> 1 </td></div>";
                                           }


                                        }
                                    });
                                }

My controller Action :

 public function ajouterauPanierAction($id)
{


        $em = $this->getDoctrine()->getManager();
        $produit = $em->getRepository(Produit::class)->find($id);
        $test = $em->getRepository(Lignedecommande::class)->findExistant($id,$this->getUser()->getId());
        count($test);

        if(($produit != null)&&($test == null))
        {
            $lignedecommande = new Lignedecommande();
            $lignedecommande->setProduitId($produit->getId());
            $lignedecommande->setUserId($this->getUser()->getId()); //à changer avec le fos
            $lignedecommande->setNomProduit($produit->getNom());
            $lignedecommande->setImage($produit->getImage());
            $lignedecommande->setEtat(0);
            $lignedecommande->setQuantite(1);
            $lignedecommande->setPrixTotal($produit->getPrix());
            $em->persist($lignedecommande);
            $em->flush();
            $msg = "success";
        }
        else if($test != null)
        {
            $line = $em->getRepository(Lignedecommande::class)->findExistant($id,$this->getUser()->getId());

            $line[0]->setQuantite($line[0]->getQuantite()+1);
            $line[0]->setPrixTotal($line[0]->getPrixTotal()+$produit->getPrix());
            $em->flush();
            $msg = "done";
        }
        return new JsonResponse(array('msg' => $msg));
}

what i need to get :

                      <div id="panier">
                            <td>{{ panier.nomProduit }} </td>
                    ====> <td><div id={{ panier.id }}{{ panier.id }}{{ panier.id }} > {{ panier.quantite }}</div>

                                <input type="submit" name="+" value="+" style="margin-top: -11%;margin-left: 10%;" onclick="updatePlus({{ panier.id }}) ">
                                <input type="submit" name="-" value="-" style="margin-top: -14%;margin-left: 22%;" onclick="updateMinus({{ panier.id }}) ">


                            </td>
                            <td><div id={{ panier.id }}{{ panier.id }}> {{ panier.prixTotal }} </div><br></td>


                        </div>

the way i am putting that id in the javascript is not working is there any way to do it ?

Answer 1

If your javascript code is inside a script tag, normally it should work

<script type="text/javascript">
    document.getElementById('cartt').innerHTML +="<div id=\"panier\"> 
    <td>"+document.getElementById('nomP'+id).innerHTML+"</td><div id="{{ 
panier.id }}{{ panier.id }}">1</div>";
</script>

But if your code is inside an external javascript code, I am not sure if it works because, the twig interpreter renders the html page first prior to load any external js files. So when the js file is loaded, the twig interpreter has finished the job. I am not sure about this however