Laravel AJAX Показать / скрыть кнопку при ответе

Question

Я создал запрос AJAX на событие нажатия кнопки, который обновляет поле модели до true или false, чтобы пометить запись модели как понравившуюся или не понравившуюся.

Контекст:

• Когда пользователь получает доступ к представлению, он должен показывать одну или другую кнопку в зависимости от того, отмечена ли запись отметкой «Нравится» или «Не нравится».

• Когда пользователь получает доступ к представлению, у него будет несколько записей, и он может как или в отличие от любого из них, поэтому необходимо опубликовать AJAX запрос и показать / скрыть правильную кнопку в соответствующем элементе HTML для этой записи модели.

• HTML Код (это только один экземпляр записи, фактическое представление может иметь несколько экземпляров этого кода на основе количества записей модели)

<div class="kt-portlet__head-toolbar">
    <a href="#" class="btn btn-icon" data-toggle="dropdown" onClick="likeProperty({{$match->matchid}})">
        {{$match->matchid}}
        @if ($match->prop_like == true)
        <i class="flaticon2-bell kt-font-brand likeprop" id="likeprop" name="likeprop"></i>
        @endif
        @if ($match->prop_like == false)
        <i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop" name="unlikeprop"></i>
        @endif
    </a>
</div>

• Javascript Код

function likeProperty(matchid) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        method: 'post',
        url: '/processes/offerdemand/matchlike/'+ matchid,
        data: {
            'id': matchid,
        },
        success: function () {
            // hide like button
            $('#likeprop').hide();
            // show like button
            $('#unlikeprop').show();
        },
        error: function (XMLHttpRequest) {
            // handle error
        }
    });
}

Кто-нибудь имеет представление об этом типе требований?

С уважением

Answer 1

Если я правильно понимаю, у вас проблема в том, что html идентификаторы likeprop и ableprop не уникальны.

Самое быстрое решение этой проблемы - добавить идентификатор записи в идентификатор. так что они уникальны. например,

<i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop-{{ $match->id }}" name="unlikeprop-{{ $match->id }}"></i>

и

$('#unlikeprop-'+matchid).show();

Жонглирование идентификаторами, как это эффективно, но может стать грязным и привести к легким ошибкам. Более современные фреймворки javascript, такие как angular, реагируют и vue. js, пытаются решить некоторые из этих проблем путем введения таких концепций, как двусторонняя привязка данных. В долгосрочной перспективе вы можете рассмотреть vue. js https://laravel.com/docs/7.x/frontend#writing - vue -компоненты .