How to Use the Jquery Number Spinner to Update Quantity in DB? - php

Question

I’m new to JQuery/JavaScript/Ajax as well as Symfony2 & PHP.
I’m building a simple Shopping Cart and I want to the users to be able to control the quantity of a product they added in their cart using the JQuery Spinner (https://jqueryui.com/spinner/).
Being new, I could really use some help with how to do this.
All of my attempts have failed and I’m just struggling.
HTML/Twig:
<tbody>
{% for key, product in quantity %}
<tr>
{{ dump(key) }}
<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': key }) }}">
<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-->
<script type="text/javascript">
$(".spinner").spinner();
</script>
Product Controller (Where I set Quantity…):
$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
$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!');

Answer 1

Use jQuery to handle the change event on the spinner. When it's updated, fire off a request to the database to update it.
Replace the url below with your URL.
$('input.spinner').on('change', function(){
var $this = $(this);
$.ajax({
url: '/path/to/update/my/product/quantity',
method: 'POST',
data : {
quantity: $this.val()
}
}).done(function(resp){
console.log('success', resp);
}).error(function(err){
console.log('error', resp);
});
});
Handle the product quantity coming over in $_POST['quantity'] manually and update the cart accordingly.
The logic to handle this inside of your Symphony controller is out of the scope because it's too broad and there's not enough information to give definitive directions.