Updating a blade in Laravel via AJAX

Question

I have a blade in my Laravel application that looks like this:

On the right, there is a collection of events that are generated with a foreach loop.

<!-- Events block -->
<div class="col-md-8">

    <div class="event-list-container">


        @foreach($events as $event)

        <!-- Event box -->
        <div class="event-box">

            <div class="row">

                <!-- Date -->
                <div class="col-sm-2 col-md-1">

                    <div class="date">
                        <p class="day">{{ $event->startDate->format('d') }}</p>
                        <p class="month">{{ $event->startDate->format('F') }}</p>
                    </div>

                </div>

                <!-- Picture -->
                <div class="col-sm-4 col-md-3">

                    <div class="event-image">
                        <a href="{{action('EventController@show',[$event->id, str_slug($event->title)])}}">
                            <img class="img-responsive" alt="{{ $event->title }}" src="{{ $event->image }}">
                        </a>
                    </div>

                </div>

                <!-- Details -->
                <div class="col-sm-6 col-md-8">

                    <div class="event-details">

                        <h2 class="title">
                            <a href="{{action('EventController@show',[$event->id, str_slug($event->title)])}}">{{ $event->title }}</a>
                        </h2>
                        <p class="when">
                            <span class="inline-title">When:</span> {{ $event->startDate->format('d M Y') }} | {{$event->startTime}}-{{$event->finishTime}}</p>
                        <p class="where">
                            <span class="inline-title">Where:</span>{{ $event->location }}</p>

                    </div>

                </div>

            </div>

        </div>
        <!-- End -->


        @endforeach

        <div class="event-list-footer">
            <div class="row">
                <div class="col-xs-12">

                    {{ $events->links() }}

                </div>
            </div>

        </div>

    </div>

</div>

With $events coming from an EventController@index method that looks like this:

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    //List all events in ascending order
    $events = Event::orderBy('startDate', 'asc')->paginate(6);

    return view('pages.events.index', compact('events'));
}

Very simple stuff.

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.

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.

In my SearchController I have this:

/**
 * Search for a specific event given text entered usingh scout
 */
public function eventSearch(Request $request)
{
    // The search string entered
    $search = $request->get('q');

    $events = Event::search($search)->get();

    return $events;
}

As you can see, this returns a collection of events, if it finds any.

Now in my AJAX request, I have a simple attempt at the moment.

$('#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);
        }
    });
});

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.

Would it be better to re-render the list as a partial using Laravel's ->render() method?

Answer 1

Yes, you can rerender the list as a partial view, and have the controller action eventSearch return the rendered html.

I would give the root element in the partial view a unique id, for example id="event-list", which makes targeting it easy.

In you success callback, you can then easily replace the partial:

success: function (data) {
        $('#event-list').replaceWith(data);
    }

Your controller action would look something like this:

/**
 * Search for a specific event given text entered usingh scout
 */
public function eventSearch(Request $request)
{
    // The search string entered
    $search = $request->get('q');

    $events = Event::search($search)->get();

    return view('pages.events.partials.eventlist', compact('events'));
}