title: Updating a blade in Laravel via AJAX
body: <p>I have a blade in my Laravel application that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/gf4NY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gf4NY.jpg" alt="enter image description here"></a></p>
  
  <p>On the right, there is a collection of events that are generated with a foreach loop.</p>
  
  <pre><code>&lt;!-- Events block --&gt;
  &lt;div class="col-md-8"&gt;
  
      &lt;div class="event-list-container"&gt;
  
  
          @foreach($events as $event)
  
          &lt;!-- Event box --&gt;
          &lt;div class="event-box"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;!-- Date --&gt;
                  &lt;div class="col-sm-2 col-md-1"&gt;
  
                      &lt;div class="date"&gt;
                          &lt;p class="day"&gt;{{ $event-&gt;startDate-&gt;format('d') }}&lt;/p&gt;
                          &lt;p class="month"&gt;{{ $event-&gt;startDate-&gt;format('F') }}&lt;/p&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;!-- Picture --&gt;
                  &lt;div class="col-sm-4 col-md-3"&gt;
  
                      &lt;div class="event-image"&gt;
                          &lt;a href="{{action('EventController@show',[$event-&gt;id, str_slug($event-&gt;title)])}}"&gt;
                              &lt;img class="img-responsive" alt="{{ $event-&gt;title }}" src="{{ $event-&gt;image }}"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;!-- Details --&gt;
                  &lt;div class="col-sm-6 col-md-8"&gt;
  
                      &lt;div class="event-details"&gt;
  
                          &lt;h2 class="title"&gt;
                              &lt;a href="{{action('EventController@show',[$event-&gt;id, str_slug($event-&gt;title)])}}"&gt;{{ $event-&gt;title }}&lt;/a&gt;
                          &lt;/h2&gt;
                          &lt;p class="when"&gt;
                              &lt;span class="inline-title"&gt;When:&lt;/span&gt; {{ $event-&gt;startDate-&gt;format('d M Y') }} | {{$event-&gt;startTime}}-{{$event-&gt;finishTime}}&lt;/p&gt;
                          &lt;p class="where"&gt;
                              &lt;span class="inline-title"&gt;Where:&lt;/span&gt;{{ $event-&gt;location }}&lt;/p&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- End --&gt;
  
  
          @endforeach
  
          &lt;div class="event-list-footer"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
  
                      {{ $events-&gt;links() }}
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>With <code>$events</code> coming from an <code>EventController@index</code> method that looks like this:</p>
  
  <pre><code>/**
   * Display a listing of the resource.
   *
   * @return \Illuminate\Http\Response
   */
  public function index()
  {
      //List all events in ascending order
      $events = Event::orderBy('startDate', 'asc')-&gt;paginate(6);
  
      return view('pages.events.index', compact('events'));
  }
  </code></pre>
  
  <p>Very simple stuff.</p>
  
  <p>The box that says refine your view uses Laravel Scout to do a search of the events table and returns back an event if it found one.</p>
  
  <p>I've been searching around as what I would like is that if anything is found the listing on the right is refreshed and shows what was found.</p>
  
  <p>In my <code>SearchController</code> I have this:</p>
  
  <pre><code>/**
   * Search for a specific event given text entered usingh scout
   */
  public function eventSearch(Request $request)
  {
      // The search string entered
      $search = $request-&gt;get('q');
  
      $events = Event::search($search)-&gt;get();
  
      return $events;
  }
  </code></pre>
  
  <p>As you can see, this returns a collection of events, if it finds any.</p>
  
  <p>Now in my AJAX request, I have a simple attempt at the moment.</p>
  
  <pre><code>$('#eventSearch').on('submit', function (e) {
      e.preventDefault();
  
      var search = $(this).find('input[name=q]').val();
  
      $.ajax({
          url: "/search/event",
          method: 'GET',
          data: {
              q: search
          },
  
          error: function (xhr, status, error) {
              var err = JSON.parse(xhr.responseText);
              alert(error);
          },
          success: function (data) {
              alert('We found'.data);
          }
      });
  });
  </code></pre>
  
  <p>Moving forward would I have to convert the list on the right to a partial, as if anything is found, I essentially want to rebuild the entire section.</p>
  
  <p>Would it be better to re-render the list as a partial using Laravel's <code>-&gt;render()</code> method?</p>