How to update database with jQuery/ajax? - php

Question

I’m new to jQuery/ajax and even PHP/Symfony2 but I’m learning.
I simply am trying to update my quantity field in my Quantity table in my database using this jQuery number spinner.
The script does work (I get success in console) but if I refresh the page, the quantity changes back to the default/original of ‘1’. How can I make it so if the user changes the quantity it gets updated through to the database. I’m lost on how to do this correctly. Do I need additional code in my controller?
twig:
{% 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>
<li>
<a href="{{ path('product_bought') }}">
Buy These Products
</a>
</li>
</ul>
<script type="text/javascript">
$(".spinner").spinner();
$('input.spinner').on('spinstop', function(){
min: 0
console.log('spinner changed');
var $this = $(this);
var $value = $('spinner').val();
$.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 %}
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');
}
$cart = $em->getRepository('ShopBundle:UserCart')->findOneBy(['user' => $this->getUser(), 'submitted' => false]);
$prodsInCartCost = $cart->getQuantities();
//BELOW just to show what I think I should do...doesn't work though
foreach ($prodsInCartCost as $key => $value) {
$prodsInCartCost = $value->getQuantity();
//Is the below condition on the right track??
if ($request->getMethod() == 'POST') {
$value->setQuantity([/*WHAT GOES HERE?*/]);
$em->persist($value);
$em->flush();
}
}
//end showing what I think I should do example
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,
);
}

Answer 1

As far as I know you can't mix flash messages with ajax request. You must change your controller action for return a json message that would be processed in javascript, and them maybe change the html value of some element. In that way you can inform the user about the action be successful. After refresh the page the quantity values should be loaded from database in the same way that it was the first time.
//controller action
public function ajaxAction($id)
{
...
$result = array("responseCode" => 200, "data" => $data);
return new Response(json_encode($result ), 200, array('Content-Type' => 'application/json'));
}
//js code
$.ajax({
url: "{{ path('product_showCart') }}",
method: 'POST',
data : {
quantity: $this.val()
}
}).done(function(resp){
if (resp.responseCode == 200) {
$('#div_quantity').html(resp.data)
}
}).error(function(err){
console.log('error', resp);
});
This code is not tested but you can get the idea.