Wie man den Jquery Zahlen-Spinner verwendet, um Quantität in DB zu aktualisieren?

Question

Ich bin neu in JQuery/JavaScript/Ajax sowie Symfony2 & PHP.

Ich baue einen einfachen Einkaufswagen und möchte den Benutzern die Möglichkeit geben, die Menge eines Produkts, das sie in ihren Einkaufswagen mit dem JQuery Spinner (https://jqueryui.com/spinner/) hinzugefügt haben, zu steuern.

Als neu, könnte ich wirklich Hilfe verwenden, wie dies zu tun ist.

Alle meine Versuche sind gescheitert und ich kämpfe nur.

HTML/Zweig:

 <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> 

Produkt Controller (Where I Menge eingestellt ...):

$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

Verwenden jQuery die change Ereignis auf dem Spinner zu behandeln. Wenn es aktualisiert wird, feuern Sie eine Anforderung an die Datenbank ab, um sie zu aktualisieren.

Ersetzen Sie die url unten durch Ihre 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); 
    }); 
}); 

Griff der Menge Produkt manuell in $_POST['quantity'] kommt vorbei und die cart entsprechend aktualisieren.

Die Logik, mit der dies in Ihrem Symphony-Controller gehandhabt wird, liegt außerhalb des Geltungsbereichs, da es zu weit gefasst ist und es nicht genügend Informationen gibt, um endgültige Anweisungen zu geben.