How to relate jQuery to field in table? - php

Question

I’m not sure if I’m asking my question in the best way possible or being totally clear but I’ll do my best.
I have the field $quantity in my Quantity entity. Then in one of my controllers I create an instance of my class entity Quantity like this: $quantity = new Quantity();. Finally I set the quantity like this: $quantity->setQuantity(1); just so things make sense and my app can run.
Then in my twig file I implement the jQuery number spinner (https://jqueryui.com/spinner/). I place the quantity field (1) in as the value.
Then in my script for the spinner I try to make it so when I click up or down the quantity is consequently updated in the database. I FAIL. This is what I need help with.
Ultimately I want to update the total cost of the users cart depending on the quantity of the products in the cart.
ProductController relevant functions:
/**
* Creates the option to 'add product to cart'.
*
* #Route("/{id}/addToCart", name="product_addToCart")
* #Method("GET")
* #Template()
*/
public function addToCartAction(Request $request, $id) {
$em = $this->getDoctrine()->getManager();
$product = $em->getRepository('ShopBundle:Product')->find($id);
$product->getId();
$product->getName();
$product->getPrice();
$cart = $em->getRepository('ShopBundle:UserCart')->findOneBy(['user' => $this->getUser(), 'submitted' => false]);
// $quantity = $em->getRepository('ShopBundle:Quantity')->findOneBy(['id' => $this->getUser()]);
if ($this->checkUserLogin()) {
$this->addFlash('notice', 'Login to Create a Cart');
return $this->redirectToRoute('product');
}
// --------------------- assign added products to userCart id ------------------------ //
$quantity = new Quantity();
if (is_null($cart) || $cart->getSubmitted(true)) {
$cart = new UserCart();
}
$cart->setTimestamp(new \DateTime()); // Set Time Product was Added
$quantity->setQuantity(1); // Set Quantity Purchased.......Make jQuery # Spinner the input of setQuantity()
$cart->setSubmitted(false); // Set Submitted
$cart->setUser($this->getUser()); // Sets the User ONCE
$cart->addQuantity($quantity); // Add Quantity ONCE
$quantity->setUserCart($cart); // Create a UserCart ONCE
$quantity->setProduct($product); // Sets the Product to Quantity Association ONCE
$em->persist($product);
$em->persist($cart);
$em->persist($quantity);
$em->flush();
$this->addFlash('notice', 'The product: '.$product->getName().' has been added to the cart!');
return $this->redirectToRoute('product');
}
/**
* Shows Empty Cart
*
* #Route("/showCart", name="product_showCart")
* #METHOD("GET")
* #Template()
*/
public function showCartAction(Request $request) {
// --------------------------- show only what the user added to their cart --------------------------- //
$em = $this->getDoctrine()->getManager();
$user = $this->getUser();
if ($this->checkUserLogin()) {
$this->addFlash('notice', 'Login to Create a Cart');
return $this->redirectToRoute('product');
}
// $product = $em->getRepository('ShopBundle:Product')->f
$cart = $em->getRepository('ShopBundle:UserCart')->findOneBy(['user' => $this->getUser(), 'submitted' => false]);
// $productsInUsersCart = $em->getRepository('ShopBundle:Quantity')->findOneBy(['product' => $cart->getId()]);
// dump($productsInUsersCart); die;
// dump($cart); die;
if (!$cart) {
$this->addFlash('notice', 'There is NO CART');
return $this->redirectToRoute('product');
}
$sub = $cart->getSubmitted();
/**
* Function in UserCart that Maps to Quantity where product values lives.
* $quantity is an object (ArrayCollection / PersistentCollection)
*/
if ($sub == false) {
$quantity = $cart->getQuantities();
} else {
$this->addFlash('notice', 'Cart should be EMPTY');
}
if (!$cart) {
throw $this->createNotFoundException(
'ERROR: You got past Gondor with an EMPTY CART'
);
}
$totalCostOfAllProducts = 0;
$totalCostOfAllProducts = $this->getTotalCost($cart, $totalCostOfAllProducts);
if (empty($price) && empty($quantity) && empty($totalCostOfAllProducts)) {
$price = 0; $quantity = 0; $totalCostOfAllProducts = 0;
}
return array(
'user' => $cart->getUser(), // for :UserCart
'cart' => $cart,
'quantity' => $cart->getQuantities(), // for :UserCart
// 'quantity' => $quantity, // for :UserCart
'totalCostOfAllProducts' => $totalCostOfAllProducts,
);
}
twig file where jQuery spinner script is (and the only thing that works is the jQuery spinner increasing or decreasing numbers...nothing else):
{% extends '::base.html.twig' %}
{% block body %}
<h1 class="text-center"><u><i>Your Cart</i></u></h1>
<div class="container">
<div class="who_is_logged_in">
{% if user is null %}
Login
{% else %}
<u>Hello<strong> {{ user }}</strong></u>
{% endif %}
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price Per Unit</th>
<th>Remove Product</th>
</tr>
</thead>
<tbody>
{% for key, product in quantity %}
<tr>
<td>{{ product.product }}</td> <!--Product-->
<td>
<input class="spinner" value="{{ product.quantity }}" style="width:30px">
</td> <!--Quantity-->
<td>${{ product.product.price|default('') }}</td> <!--Price-->
<td>
<a href="{{ path('product_remove', {'id': product.product.id }) }}">
<button name="REMOVE" type="button" class="btn btn-danger" id="removeButton">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</a>
</td><!--Remove-->
</tr>
{% endfor %}
</tbody>
</table> <!--top table-->
<div class="money-container">
<p class="text-right">Total Cost: ${{ totalCostOfAllProducts }}</p>
</div> <!--moneyContainer-->
{% for flash_message in app.session.flashbag.get('notice') %}
<div class="flash-notice">
<strong>{{ flash_message }}</strong>
</div> <!--flashNotice-->
{% endfor %}
</div> <!--container-->
<ul>
<li>
<a href="{{ path('product') }}">
Add More Products
</a>
</li>
{# {% if cartArray is empty %} #}
{# {% else %} #}
<li>
<a href="{{ path('product_bought') }}">
Buy These Products
</a>
</li>
{# {% endif %} #}
</ul>
<script type="text/javascript">
$(".spinner").spinner();
$('input.spinner').on('change', function(){
var $this = $(this);
$.ajax({
url: '{{ path('product_showCart') }}',
method: 'POST',
data : {
quantity: $this.val()
}
}).done(function(resp){
console.log('success', resp);
}).error(function(err){
console.log('error', resp);
});
});
</script>
{% endblock %}
If you can't already tell I'm new to jQuery/web development but I'm learning day by day. I could really use some help/guidance!
EDIT:
I changed my script to this and now I see my messages in my console but still nothing gets updated/changed in the database and when I refresh my page, the quantity goes back to display '1'.
<script type="text/javascript">
$(".spinner").spinner();
$('input.spinner').on('spinstop', function(){
console.log('spinner changed');
var $this = $(this);
$.ajax({
url: "{{ path('product_showCart') }}",
method: 'GET',
data : {
quantity: $this.val()
}
}).done(function(resp){
console.log('success', resp);
}).error(function(err){
console.log('error', resp);
});
});
</script>