title: Display in the same page with ajax the products from a specific category - ajax, laravel
body: <p>I have some problem with a task. I'm not very good with javascript. Please help. </p>
  
  <p>I display the categories as a button and I want when the button is pressed to display the products assigned to each category, also the products to be in the form of a button. In the next task I have to make sure that when the product button is pressed, that product is added to a list, also without refreshing the page.</p>
  
  <p><strong>Controler:</strong></p>
  
  <pre><code>public function categories($id)
  {
      $table = Table::find($id);
      $categories = Category::all();
      return view('products', compact('table', 'categories'));
  }
  public function products($id)
  {
      $products = Products::find($id);
      $response = '&lt;button class="btn btn-dark product-button"&gt;{{$product-&gt;name}}&lt;/button&gt;';
      return response()-&gt;json([
          'response' =&gt; $response
      ]);
  }
  </code></pre>
  
  <p><strong>Routes:</strong></p>
  
  <pre><code>Route::get('/masa/{id}','HomeController@categories')-&gt;name('table');
  Route::get('/produse', 'HomeController@produse')-&gt;name('products');
  </code></pre>
  
  <p><strong>Blade</strong></p>
  
  <pre><code>@extends('layouts.app')
  @section('content')
      &lt;div class="container-fluid"&gt;
          &lt;div class="row title"&gt;
              &lt;h2 style="text-align: center;  margin: auto;"&gt;{{$table-&gt;name}}&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4 col-xs-4 col-md-4 col-lg-4 product-table"&gt;
                  &lt;div class="row"&gt;
                      &lt;button class="btn btn-dark product-button"&gt;
                          {{$table-&gt;name}}
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-8 col-xs-8 col-md-8 col-lg-8 product-table"&gt;
                  &lt;div class="row"&gt;
                      {{--Categorii--}}
                      @foreach($categories as $category)
                          &lt;button class="btn btn-dark product-button" id="cat-{{$category-&gt;id}}"&gt;{{$category-&gt;name}}&lt;/button&gt;
                      @endforeach
                  &lt;/div&gt;
                  &lt;hr&gt;&lt;br&gt;
                  &lt;div class="row" id="products"&gt;
                      &lt;button class="btn btn-dark product-button"&gt;Product Button&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"&gt;&lt;/script&gt;
      &lt;link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"&gt;
      {{--&lt;script src="{{asset('/js/script.js')}}"&gt;&lt;/script&gt;--}}
      &lt;script type="text/javascript"&gt;
          $('select[cat-{{$category-&gt;id}}]').on('click', function () {
              $.ajax(
                  url: "{{route('products')}}",
                  type: 'post',
                  data: {
                      'category': '{{$category-&gt;name}}',
                      "_token": "{{ csrf_token() }}"
                  },
                  success: function (data) {
                      $('.product-table').after(data.response);
                  }
              });
          });
      &lt;/script&gt;
  @endsection
  </code></pre>