laravel5.2 convert Laravel Code Ajax

Question

ich diese Form mit Laravel Code entwickelt

Wenn ich von 1.

auf + die Menge dieses Produkts erhöhen klicken Wenn ich auf - die Menge dieses Produkts verringern, indem 1.

cart.blade.php (view):

<div class="cart_quantity_button"> 
    <a class="cart_quantity_up" href='{{url("cart?product_id=$item->id&increment=1")}}'> + </a> 
    <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2"> 
    <a class="cart_quantity_down" href='{{url("cart?product_id=$item->id&decrease=1")}}'> - </a> 
</div> 

Warenkorb-Funktion in der Steuerung:

public function cart() 
{ 
    if (Request::isMethod('POST')) { 
     $product_id = Request::get('product_id'); 

     $product = Product::find($product_id); 

     Cart::add(array('id' => $product_id,'name' => $product->name, 'qty' => 1, 'price' => $product->price,'options'=>array('image'=>$product->image))); 
    } 

    $id = Request::get('product_id'); 

    //increment the quantity 
    if ($id && (Request::get('increment')) == 1) { 
     $p = Request::get('increment'); 

     $rowId = Cart::search(array('id' => $id)); 
     // echo "row id".$rowId."and the p=".$p; 
     $item = Cart::get($rowId[0]); 
     // echo "row id".$rowId; 

     $add = $item->qty + 1; 
     Cart::update($rowId[0], $add); 
    } 

    //decrease the quantity 
    if ($id && (Request::get('decrease')) == 1) { 
     $rowId = Cart::search(array('id' => $id)); 

     $item = Cart::get($rowId[0]); 
     $sub = $item->qty - 1; 
     echo "item" . $sub; 
     Cart::update($rowId[0], $sub); 
    } 

    if ($id && (Request::get('remove')) == 1) { 
     $rowId = Cart::search(array('id' => $id)); 

     Cart::remove($rowId[0]); 
    } 

    $cart = Cart::content(); 

    return view('cart', array('cart' => $cart,'title' => 'Welcome', 'description' => '', 'page' => 'home','subscribe'=>"",'brands' => $this->brands)); 

} 

public function cart_remove() 
{ 
    Cart::destroy(); 
    return Redirect::away('cart'); 
} 


public function checkout() 
{ 
    $cart = Cart::content(); 
    return view('checkout', array('cart' => $cart,'title' => 'Welcome', 'description' => '', 'page' => 'home','subscribe'=>"",'brands' => $this->brands)); 
} 

Ich möchte diesen Code mit Ajax konvertieren, muss ich einfach Code für diese

<script> 
    function getMessage($id) 
    { 
     $.ajax({ 
      type:  'POST', 
      url:  'getmsg', 
      dataType: 'json', 
      data:  { 
          valu_id: $id 
         }, 
      success: function(data) { 
          $("#msg").html(data.msg); 
         } 
     }); 
    } 
</script> 

<?php 
$item_id = 3; 
echo Form::button('+',['onClick'=>'getMessage($item_id)']); 
?> 

<div id='msg'> 
    <input id="msg" type="text" name="quantity" autocomplete="off" size="2"> 
</div> 

Reglerfunktion:

public function ajax() 
{ 
    $value= $_POST['valu_id']+1; 
    return response()->json(array('msg'=>$value), 200); 
} 

I don Ich weiß nicht, wie ich diesen Code vervollständigen soll. Ich habe viele Fragen zu diesem Code. wie

• Wie die Produkt-ID von cart.blade.php Ansicht erhalten und es in getmessage() steckt es in Ajax-Funktion zu benutzen?
• Wie setze man getmessage() in <div class="cart_quantity_button"> statt Knopf onclick, um die Form oben zu respektieren?
• Wie wird die Menge im Eingabefeld als obige Form zurückgegeben?

Answer 1

^{Hinweis: Diese Antwort nicht einfach Ihnen eine funktionierende Lösung zu geben, aber eine Idee, wie Ajax-Request/Response zu behandeln.}

Erstens, auch hart event.preventDefault() würde Standardaktion verhindern, die der URL folgt, würde ich lieber die URL zu data- Attribut speichern.

<div class="cart_quantity_button"> 
    <a class="cart_quantity_up" href="javascript:void(0)" data-route="{{url('cart?product_id=$item->id&increment=1')}}"> + </a> 
    <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2"> 
    <a class="cart_quantity_down" href="javascript:void(0)" data-route="{{url('cart?product_id=$item->id&decrease=1')}}"> - </a> 
</div> 

Wie das Produkt-ID aus cart.blade.php Sicht zu bekommen und es in GetMessage put() in Ajax-Funktion zu benutzen?

Es ist immer besser, auf ein Ereignis zu hören, das in diesem Fall ein Klick ist.

$('.cart_quantity_up').on('click', function(e) { 
    //an ajax call here 
}); 

Same-Code gilt für die anderen

$('.cart_quantity_down').on('click', function(e) { 
    //an ajax call here 
}); 

nun zwei Klick-Ereignisse haben zu jedem entsprechenden Elemente angebracht. Dann ist es Zeit, die Ajax-Funktion zu erweitern.

function updateQty(url){ 
    var $qty = $('.cart_quantity_input'); 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     dataType: 'json', 
     data: { 
      cart_qty: $qty.val() 
     }, 
     success:function(data){ 
      $qty.val(data.qty); 
     } 
    }); 
} 

Die obige Funktion ist einfach

1. einen Parameter, der URL,
2. hat eine Post-Anforderung mit uri param key 'cart_qty' response
3. kehrt zu rufen für Ajax ist nimmt die ist ein Wert von 'Menge' von der Steuerung zu cart_quantity_input Eingabeelement

Und dann, setzen Sie die a JAX-Funktion zu den ersten Schnipseln (click Ereignis)

$('.cart_quantity_up').on('click', function(e) { 
    e.preventDefault(); 
    //get the data-route 
    var url = $(this).data('route'); 
    //call the ajax function 
    updateQty(url); 
}); 

$('.cart_quantity_down').on('click', function(e) { 
    e.preventDefault(); 
    //get the data-route 
    var url = $(this).data('route'); 
    //call the ajax function 
    updateQty(url); 
}); 

Eigentlich Dinge einfacher zu gestalten, können Sie das Ereignis aus mehreren Selektoren auf einmal anbringen.

$('.cart_quantity_up, .cart_quantity_down').on('click', function(e) { 
    e.preventDefault(); 
    //get the data-route for the 'up' 
    var url = $(this).data('route'); 
    //call the ajax function 
    updateQty(url); 
}); 

Jetzt erhalten Sie die Idee auf, wie Ajax-Post erstellen und abrufen seine Antwort danach wird sie auf das Eingangselement zu befestigen.

An diesem Punkt werde ich Ihren Code umgestalten. Und oh, all deine Fragen sollten zu diesem Zeitpunkt beantwortet worden sein.

---

Ihr Controller sieht ein bisschen chaotisch, wie Sie beide Post handhaben und für eine solche einfache Situation Anfragen bekommen. Ich würde lieber nur posten. Anstatt einige Bedingungen zu haben, werde ich den Footprint innerhalb des data- Attributs (wieder) setzen. Am Ende wickle ich sie in ein Formular ein, weil das CSRF-Token für mehr Sicherheit sorgt.

<form name="cart_form"> 
    {{ csrf_field() }} 
    <input type="hidden" class="item_id" value="{{ $item->id }}"> 
    <div class="cart_quantity_button"> 
     <button type="button" class="cart_quantity_up" data-route="{{url('cart')}}" data-increase="1"> + </button> 
     <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2"> 
     <button class="cart_quantity_down" data-route="{{url('cart')}}" data-increase="0"> - </button> 
    </div> 
</form> 

Sie sind frei, Ihre eigene Sicht, so lange zu entwerfen, wie Sie eine Post-Anforderung tun werden (wie ich auf sie mache). Ich werde ein bisschen über die Logik, die ich machen werde, erklären.

• Halten Sie die $item->id auf verstecktes Feld
• Ajax-Request an url('cart') Route machen gehen und speichern sie auf data-route
• data-increase Fügen Sie jede Anfrage unterscheiden sollte

Jetzt erhöhen oder verringern aufhorchen auf Klick Ereignis

$('.cart_quantity_up, .cart_quantity_down').on('click', function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     url = $this.data('route'), 
     increase = $this.data('increase'); 

    updateQty(url, increase); 
}); 

Unter updateQty Funktion ist ein bisschen anders als die erste, die ich gemacht habe. Es akzeptiert den zweiten Parameter increase als (pseudo-) booleschen Wert. Beachten Sie auch, dass ich den Token als Anforderungsheader anstelle von body poste.

function updateQty(url, increase){ 
    var $qty = $('.cart_quantity_input'), 
     itemId = $('.item_id').val(); 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     dataType: 'json', 
     headers: { 
      'X-CSRF-Token' : $('input[name="_token"]').val() 
     }, 
     data: { 
      'cart_qty': $qty.val(), 
      'item_id': itemId, 
      'increase': increase 
     }, 
     success:function(data){ 
      $qty.val(data.qty); 
     } 
    }); 
} 

Ihr Controller

 

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 
use App\Cart; 
use App\Http\Requests; 

class YourController extends Controller 
{ 
    public function cart(Request $request) 
    { 
     if ($request->ajax()) { 
      $id = $request->item_id; 
      $cart = Cart::search(['id' => $id]); 
      //Note: This code may not working as what you expect 
      //  but it should give you the idea that laravel 
      //  actually has increment and decrement methods 
      //  and else. 
      if ($request->increase) { 
       $cart->increment('qty'); 
      } else { 
       $cart->decrement('qty'); 
      } 
      $qty = $cart->first(['qty']); 

      return response()->json(['qty' => $qty]); 
     } 
     //rest is your code 
     //... 
    } 
}

In dem obigen Code, ich bin

• treat Ajax-Anforderung aus dem Code separat zu versuchen,
• Update qty Spalte basierend auf $_POST['increase']
  • Wenn 1, inkrementieren. Wenn 0, dekrementiert es
• Zupacken der Wert qty Spalte (obwohl Ich bin nicht sicher, es wird funktionieren)
• Rückkehr der Wert verkeilt 'qty' als json
• es wird dann Eingabeelement aktualisieren, basierend auf $qty.val(data.qty)