Getting data from controller to the view Laravel with Javascript

Question

I'm trying to get a selected product(id) from view to controller but it only shows the first product(id). So I have a loop of products which shows image of each product what I want is when a user select any image it should send the id according to the selected product. So far it only pick the first product id even if I click the last product(image) or any different image it only send the first product id. How can I fix this?

Blade

  @foreach($products as $product)
    @if(count($product->ProductsPhoto))
    <a  href="javascript:;" class="view-product" >
    <img src="{{Storage::url($product->ProductsPhoto[0]->filename)}}" alt=""  >
      </a>
   @else
        @endif
    @endforeach

Javascript

<?php  $id = $product->id; ?>
<script>
  $('.view-product').on("click", function(event) {
  $("#view-product").modal('show');
  $.ajax({
    url: '{{route('view.producT', $id)}}',
    type: 'GET',
    dataType: 'json',
  }).done(function(response) {
    console.log('received this response: '+response);
  });
});

</script>

Route

Route::get('view-product/{id}', 'HomeController@viewProduct')->name('view.producT');

Controller

public function viewProduct($id)
{
  dd($id);
}

Hi, can you please make sure that you are getting the correct id at javascript end before actually send the id to the controller ? — Tushar
– Tushar, Commented Jul 7, 2020 at 1:20
How do I know(check) if I'm getting the correct id at javascript ? @Tushar — user11710915
– user11710915, Commented Jul 7, 2020 at 1:23
I think you should pass the product id as an id attribute to <a> tag and then fetch it using jquery with $(selector).attr(). — Tushar
– Tushar, Commented Jul 7, 2020 at 1:27
So I should add something like data-id="{{$product->id}}" in <a> tag then how do I fetch or where do I put the $(selector).attr()? @Tushar — user11710915
– user11710915, Commented Jul 7, 2020 at 1:30
Yes, or even you can use just the id as well and can put it on the <img> tag and then after listening for .view-product class click, just do this const id = event.target.id and then can use it as you wish. We have to do event.target because we are listening to a click on .view-product class but we don't yet know which image was clicked. So this will take care of that part. — Tushar
– Tushar, Commented Jul 7, 2020 at 1:43

Kelvin · Accepted Answer · 2020-07-07 01:40:16Z

Of course you are not sending the id on each product

you are sent the id by using <?php $id = $product->id; ?> and $product was from @foreach($products as $product) @endoferach

however $id would be return the same id

you can send the product id on html and get it from javascript

@foreach($products as $product)
    @if(count($product->ProductsPhoto))
        <a class="view-product" id="{{$product->id}}">
            <img src="{{Storage::url($product->ProductsPhoto[0]->filename)}}" alt=""  >
        </a>
   @endif
@endforeach

thats how your a href by adding id="{{$product->id}}"

<script>
    $('.view-product').on("click", function(event) {
        var product_id = $(this).attr("id"); //this how you get the product_id
        var url = '{{route('view.producT',[":product_id"])}}'; // you cant combine js value on laravel route
        //then you need to replace it using below way
        url = url.replace(':product_id', product_id);
        $("#view-product").modal('show');
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
        }).done(function(response) {
            console.log('received this response: '+response);
        });
    });

</script>

Collectives™ on Stack Overflow

Getting data from controller to the view Laravel with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related