每个循环中的Ajax添加按钮Laravel 5.4

Question

I'm trying to create an "Add button" in foreeach loop. And submit it using ajax. But i have problems finding out what exactly im doing wrong, my JS knowledge is very poor.

So this is my code.

View:

 @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

This is my 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

This is my route:

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

And my controller:

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";
    }

So i think the problem is also in ID that im using in foreach loop. That means all forms in loop have same ID's. So i need to reconsider my whole approach. Any one have ideas how can i do this?

Answer 1

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

I think it helps.

Answer 2

So i was doing everything wrong in the beginning!

I changed the whole approach. Thanks to my friends help.

Now first of all i change form in to a Button witch calls an event:

this is the view:

 @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

Than i change 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>

Than i change my route:

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

And created new function:

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";
    }

I hope my experience will help some body.