title: How to replace part of the view with new result or view using ajax
body: <p><a href="https://i.stack.imgur.com/0RmPW.png" rel="nofollow noreferrer">Looking at this image</a></p>
  <p>I want to change the result in the table when any option in the drop down is selected.</p>
  <p>My view</p>
  <pre><code>&lt;div class=&quot;tab-content&quot; id=&quot;myTabContent&quot;&gt;
          @include('invoices.invoice-table')
  &lt;/div&gt;
  </code></pre>
  <p>Controller</p>
  <pre><code>  $invoices = Invoice::where('slug', $request-&gt;slug)-&gt;paginate(15);
    $html =  view('invoices.invoice-table', compact('invoices'))-&gt;render();
  
    return response()-&gt;json(compact('html'));
  </code></pre>
  <p>Ajax code</p>
  <pre><code>$(function($){
              $(document).on('change', '#select-customer', function(){
                  let cust =  $(this).val();
                  $.ajax({
                      url: '/invoices/search',
                      type: 'post',
                      dataType:'json',
                      data:{slug:cust, _token:'{{ csrf_token() }}'},
                      success: function(data){
                          $(&quot;#myTabContent&quot;).html(data.html);
                      }
                  });
              })
          })
  </code></pre>