Обновление клинка в Laravel через AJAX

Question

В моем приложении Laravel есть блейд, который выглядит следующим образом:

Справа есть набор событий, которые генерируютсяс циклом foreach.

<!-- 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>

С $events из метода EventController@index, который выглядит следующим образом:

/**
 * 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'));
}

Очень простые вещи.

в окне с надписью уточнение вашего вида используется Laravel Scout для поиска таблицы событий и возврата события, если оно было найдено.

Я искал вокруг, так как мне хотелось бы, чтобы в случае обнаружения чего-либосписок справа обновляется и показывает, что было найдено.

В моем SearchController у меня есть это:

/**
 * 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;
}

Как вы можете видеть, это возвращает коллекцию событий, еслион находит любой.

Теперь, в моем запросе AJAX, у меня есть простая попытка на данный момент.

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

Двигаясь вперед, мне пришлось бы преобразовать список справа в частичное,как будто что-то найдено, я по сути хочу перестроить весь раздел.

WoНе лучше ли перерисовать список как частичный, используя метод Laravel ->render()?

Answer 1

Да, вы можете перерисовать список как частичное представление, и действие контроллера eventSearch вернет обработанный html.

Я бы дал корневому элементу в частичном представлении уникальный идентификатор, например id="event-list", что облегчает нацеливание.

В случае успешного обратного вызова вы можете легко заменить частичное:

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

Ваше действие контроллера будет выглядеть примерно так:

/**
 * 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'));
}