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?
<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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.