Смена кнопок с помощью AJAX

Question

Я создал систему, в которой вы можете посетить место и иметь весь код, который позволяет размещать запись в базе данных и удалять из базы данных по нажатию кнопки с помощью ajax, но я изо всех сил пытаюсь решить, как сделатькнопка меняется с помощью ajax при ее нажатии в зависимости от того, существует запись или нет.На данный момент кнопка изменяется только в том случае, если страница обновляется, хотя код AJAX работает для добавления или удаления из базы данных.Как мне заставить свои кнопки меняться и отвечать на оператор if с помощью AJAX?вот что у меня есть:

HTML:

@if(Auth::user()->visitors()->where('place_id', $place->id)->first())
      <a class="btn btn-visited visit"  data-id="{{ $place->id }}">I've Visited <i class="fas fa-check"></i></a>
       @else
      <a class="btn btn-not-visited visit"  data-id="{{ $place->id }}">Visited?</a>
@endif

AJAX JS:

var token = '{{ Session::token() }}';
var urlVisit = '{{ route('visitss') }}';

$('.visit').on('click', function (event) {
    event.preventDefault();
    $.ajax({
        method: 'POST',
        url: urlVisit,
        data: {
            place_id: $(event.target).data("id"),
            _token: token
        }
    }).done(function() {
        //
    });
});

php:

$place_id = $request['place_id'];
        $place = place::find($place_id);
        $visited = Auth::user()->visitors()->where('place_id', $place_id)->first();

    if($visited == null) {
                $visited = new Visit();
                $visited->user_id = Auth::user();
                $visited->place_id = $place->id;
                $visited->save();
                return null;
            }
        else{

          $visited->delete();
             return null;
        }

Как сделатья получаю кнопки для ответа AJAX?

Answer 1

Blade работает на PHP, поэтому ваш ajax-вызов не может ответить на оператор if, если вы не извлекаете этот blade-файл в запросе ajax.

Я также настоятельно рекомендую не использовать логику в файле блейда.Это не следует логике MVC.Сделайте это в контроллере и передайте его в представление.

Контроллер:

$visited = Auth::user()->visitors()->where('place_id', $place->id)->first():

return view('something')->with('visited', $visited);

Затем в вашем контроллере, который отвечает на вызов Ajax, верните true вместо нуля.Это будет успешный ответ, и вы можете использовать метод jQuery done(), чтобы поменять текст и классы кнопки, чтобы пометить ее как посещенную!

Пример jQuery:

$('.btn.visit').removeClass('btn-not-visited').addClass('btn-visited').html('I\'ve Visited <i class="fas fa-check"></i>');

Answer 2

Вы хотите изменить кнопку на успех от Ajax.

Вставьте в свою функцию успеха все, что вы хотите сделать

$('.visit').on('click', function (event) {
    event.preventDefault();
    $.ajax({
        method: 'POST',
        url: urlVisit,
        data: {
            place_id: $(event.target).data("id"),
            _token: token
        }
    }).done(function() {
        // add button change here
        // select the buttons I'd and manipulate e.g.
       $('#buttonID').html('change');
   });
});