Ajaxループごとにボタンを追加するLaravel 5.4

Question

私はforeeachループに「追加ボタン」を作成しようとしています。そしてそれをajaxを使って提出する。しかし、私は間違って何をしているのかを見つけ出すのに問題があり、JSの知識は非常に貧弱です。

これは私のコードです。

ビュー：

@foreach ($lots as $lot) 
    @if (count($lot->comments) >= 1) 
      <span class="glyphicon glyphicon-ok"></span> 
    @else 
      <form id="favorites-button" data-id="{{ $lot->lot_id }}"> 
      {{ csrf_field() }} 
      <input type="hidden" name="body" value="0_o" class="form-control"> 
      <button type="submit" class="btn btn-xs btn-primary">Favorites</button> 
      </form> 
    @endif 
@endforeach 

これは私のJSある

@section('js') 
     <!-- Ajax add to favorites --> 
     <script type="text/javascript"> 
      $("document").ready(function(){ 
       $("#favorites-button").submit(function(e){ 
        e.preventDefault(); 
        var button = $(this); 
        var url = '/lots/' + button.data('id') + '/comment'; 
        var body = $("input[name=body]").val(); 
        var dataString = 'body='+body; 
        $.ajax({ 
         type: "POST", 
         url : url, 
         data : dataString, 
         dataType : "json", 
         success : function(data){ 

         } 

        },"json"); 

       }); 
      }); 
     </script> 
    @endsection 

は、これは私のルートです：

Route::post('/lots/{lot}/comment', 'CommentsController@add'); 

そして、私のコントローラ：

public function add(Lot $lot) 
    { 
     Comment::create([ 
      'body'   => request('body'), 
      'lot_id'   => $lot->lot_id, 
      'user_id'   => auth()->user()->id, 
      'bid'    => $lot->bid, 
      'lot_date'  => $lot->lot_date, 
      'auction_name' => $lot->auction_name, 
      'pics_urls'  => $lot->pics_urls, 
      'company'   => $lot->company, 
      'model_name_en' => $lot->model_name_en, 
      'model_type_en' => $lot->model_type_en, 
      'scores_en'  => $lot->scores_en, 
      'model_year_en' => $lot->model_year_en, 
      'color_en'  => $lot->color_en, 
      'displacement' => $lot->displacement, 
      'transmission_en' => $lot->transmission_en, 
      'start_price_en' => $lot->start_price_en, 
      'inspection_en' => $lot->inspection_en, 
      'grade_en'  => $lot->grade_en, 
      'equipment_en' => $lot->equipment_en, 
      'mileage_num'  => $lot->mileage_num, 
      'result_en'  => $lot->result_en, 
      'auct_ref'  => $lot->auct_ref, 
     ]); 

     return "ok"; 
    } 

だから私はIDのメイクにはforeachループで使用している問題だと思います。これは、ループ内のすべてのフォームが同じIDを持つことを意味します。だから私は私の全体のアプローチを再考する必要があります。どのように私はこれを行うことができますアイデアを持っていますか？

Answer 1

私は最初から間違っていました！

私は全体のアプローチを変更しました。私の友人のおかげです。

これは図である：

@foreach ($lots as $lot) 
    @if (count($lot->comments) >= 1) 
     <span class="glyphicon glyphicon-ok"></span> 
    @else 
     <button data-id="{{ $lot->lot_id }}" class="btn btn-xs btn-primary favouriteButton">Favourite</button> 
    @endif 
@endforeach 

私はJSの変化より：

<!-- Ajax add to favorites --> 
    <script type="text/javascript"> 
     // call button via class 
     $('.favouriteButton').click(function (e) { 
      var button = $(this); 
      e.preventDefault(); 
      // change the route 
      $.get('/lots/' + $(this).data('id') + '/favourite') 

       .done(function (response) { 
      // instead of button insert check icon 
        button.parent().append('<span class="glyphicon glyphicon-ok"></span>'); 
      // remove button 
        button.remove(); 

       }) 
       .fail(function (respnse) { 

       }); 
     }); 
    </script> 

ボタン魔女がイベントを呼び出すにして

は今、最初にすべての私はフォームを変更します

私のルートを変更するより：

私は私の経験は、いくつかの体を助けることを願っています

public function favouriteButton(Lot $lot){ 
     Comment::create([ 
      'body'   => 'Auto add', // this is the body for new comment 
      'lot_id'   => $lot->lot_id, 
      'user_id'   => auth()->user()->id, 
      'bid'    => $lot->bid, 
      'lot_date'  => $lot->lot_date, 
      'auction_name' => $lot->auction_name, 
      'pics_urls'  => $lot->pics_urls, 
      'company'   => $lot->company, 
      'model_name_en' => $lot->model_name_en, 
      'model_type_en' => $lot->model_type_en, 
      'scores_en'  => $lot->scores_en, 
      'model_year_en' => $lot->model_year_en, 
      'color_en'  => $lot->color_en, 
      'displacement' => $lot->displacement, 
      'transmission_en' => $lot->transmission_en, 
      'start_price_en' => $lot->start_price_en, 
      'inspection_en' => $lot->inspection_en, 
      'grade_en'  => $lot->grade_en, 
      'equipment_en' => $lot->equipment_en, 
      'mileage_num'  => $lot->mileage_num, 
      'result_en'  => $lot->result_en, 
      'auct_ref'  => $lot->auct_ref, 
     ]); 

     return "ok"; 
    } 

：

Route::get('/lots/{lot}/favourite','CommentsController@favouriteButton'); 

し、新しい機能を作成しました。

Answer 2

<script type="text/javascript"> 
 
    $("document").ready(function(){ 
 
     $("#favorites-button").submit(function(e){ 
 
      e.preventDefault(); 
 
      var button = $(this); 
 
      var url = '/lots/' + button.data('id') + '/comment'; 
 
      var body = $("input[name=body]").val(); 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: url, 
 
       data: { 
 
        body: body, 
 
        _token: '{{ csrf_token() }}' 
 
       }, 
 
       dataType: "json", 
 
       success: function(data){ 
 
        console.log('success'); 
 
       } 
 

 
      },"json"); 
 

 
     }); 
 
    }); 
 
</script>

私はそれが助けと思います。