Laravel & Ajax - Отключить кнопку отправки, где поле столбца истинно

Question

Я никогда раньше не использовал ajax, но в моем текущем проекте я вижу необходимость в этом.У меня есть таблица счетов, в которой есть поле с именем «is_confirmed», которое по умолчанию установлено в false.

В файле index.blade.php я отобразил все счета, которые были отправлены зарегистрированным пользователем.В каждой строке таблицы, когда пользователь нажимает кнопку подтверждения, эта строка обновляется, и в поле «is_confirmed» устанавливается значение «true» в базе данных.Проблема теперь в том, что у них все еще есть активная кнопка подтверждения, что означает, что пользователь все еще может нажать ее.

Как бы вы реализовали это так, чтобы во всех строках, в поле «is_confirmed» которых было установлено значение «true», были отключены кнопки, а в тех строках, в поле «is_confirmed» которых установлено значение «false», были единственные кнопки, для которых нажата даже кнопка?при обновлении страницы.

Вот отображаемая таблица:

Вот мой index.blade.php, который в настоящее время отображает все отправленные счета.Наряду с кнопкой подтверждения для обновления поля базы данных «is_confirmed» в каждой строке:

        @section('content')
@foreach($sentinvoices as $sentinvoice)
    <tr>
        <td>
            <span>{{ $sentinvoice->recipient->fullname }}</span>
        </td>
        <td>
            <span>{{$sentinvoice->updated_at->format("M d, Y")}}</span>
        </td>
        <td>
            <span>{{$sentinvoice->status}}</span>
        </td>
        <td>
            <span>{{$sentinvoice->amount}}</span>
        </td>


<td class="text-center">
        <form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" id="ajax">
            @csrf
            <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
            <input type="hidden" name="is_confirmed" value="{{$sentinvoice->is_confirmed}}">
            <button class="btn btn-success btn-sm" type="submit" id="confirm">Confirm</button>
            </form>
    </td>
</tr>
@endforeach

@ endsection

Я также добавил функцию ajax внизу index.blade.php какследующим образом:

@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

    $("#ajax").click(function(event) {
        event.preventDefault();

        $.ajax({
            type: "post",
            url: "{{ url('sender.confirm') }}",
            dataType: "json",
            data: $('#ajax').serialize(),
            success: function(data){
                  alert("Data Save: " + data);
                  $("#confirm").prop('disabled', true);
            },
            error: function(data){
                 alert("Error")
            }
        });
    });
</script>
@endsection

Вот моя функция в InvoiceController, который выполняет отправку формы:

public function confirmInvoice(Request $request, $uuid)
    {   
        $user = auth()->user();
        $sentinvoices = Invoice::where('uuid', $uuid)->first();

        $sentinvoices->sender_id = $user->id;
        $sentinvoices->is_confirmed = 1;
        $sentinvoices->save();

        return redirect()->back();
    }

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

Answer 1

Несколько вещей здесь:

1. Поскольку вы делаете запрос AJAX, ответ на перенаправление не имеет никакого смысла.
2. Ваш #ajax идентификатор на самом деле является идентификатором формы, вы не можете "щелкнуть" по форме, но вместо этого отправляете ее.
3. Поскольку у вас, вероятно, есть несколько форм, вам следуетприсвойте каждому из них уникальный идентификатор и прослушайте события отправки для всех из них.

Вот пример того, что вы можете сделать:

Просмотр:

@section('content')
<form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" id="form-{{$sentinvoice->uuid}}" class='ajax'>
    @csrf
    <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
    <input type="hidden" name="is_confirmed" value="{{$sentinvoice->is_confirmed}}">
    <button class="btn btn-success btn-sm" type="submit" class="confirm" {!! $sentinvoice->is_confirmed ? 'disabled="disabled"' : '' !!}>Confirm</button>
</form>
@endsection

JavaScript

@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

    $(".ajax").submit(function(event) { //listening on class name and for submit action
        event.preventDefault();
        var $confirmButton = $(this).find('.confirm'); // the confirm button of this form
       $confirmButton.prop('disabled', true);
        $.ajax({
            type: "post",
            url: $(this).attr('action'), //send to the correct url based on the markup
            dataType: "json",
            data: $(this).serialize(), //this refers to the submitted form
            success: function(data){
                  alert("Data Saved");
            },
            error: function(data){
                 $confirmButton.prop('disabled', false);
                 alert("Error")
            }
        });
    });
</script>
@endsection

И ваш контроллер:

public function confirmInvoice(Request $request, $uuid)
{   
    $user = auth()->user();
    $sentinvoices = Invoice::where('uuid', $uuid)->first();

    $sentinvoices->sender_id = $user->id;
    $sentinvoices->is_confirmed = 1;
    if (!$sentinvoices->save()) {
        return response()->json([ 'success' => false ], 500); //Error response
    }


    return response()->json([ 'success' => true ]); 
}

Что изменилось:

1. Идентификаторы уникальны (и не очень важны), но мы слушаемна события на занятиях.Это связано с тем, что JavaScript требует, чтобы идентификаторы были уникальными
2. Мы слушаем событие submit вместо события click.Это будет охватывать альтернативные способы отправки формы (например, путем нажатия кнопки и нажатия клавиши ввода)
3. Контроллер вернет JSON и соответствующий код ответа.

Обратите внимание, что кнопка подтверждения здесь отключена перед отправкой запроса и активируется только в случае сбоя запроса.Это предотвратит повторное нажатие, прежде чем запрос будет выполнен.

Answer 2

Я предполагаю, что у вас есть форма для каждой кнопки подтверждения, поскольку вы не уточняете это.

Прежде всего, ваша кнопка подтверждения и формы не может иметь идентификаторы #ajax и #confirm, посколькубудет отображаться более чем на одной странице, а идентификаторы элементов должны быть уникальными во всем документе.

Так что замените его классом и удалите идентификатор на кнопке подтверждения, как показано ниже:

@section('content')
<form method="POST" action="{{ route('sender.confirm', $sentinvoice->uuid) }}" class="confirm-form">
    @csrf
    <input type="hidden" name="sender_id" value="{{$sentinvoice->sender_id}}">
    <input type="hidden" name="sender_confirmed" value="{{$sentinvoice->is_confirmed}}">
    <button class="btn btn-success btn-sm" type="submit">Confirm</button></form>
@endsection

Затем в вашем запросе ajax замените идентификатор на имя класса, измените событие для отправки.и используйте jQuery и $ (this) текущий элемент, чтобы найти кнопку внутри него и отключить опору.

    $(".confirm-form").on('submit', function(event) {
        event.preventDefault();
        var $button = $(this).find('button');
        var data = $(this).serialize();
        $.ajax({
            type: "post",
            url: "{{ url('sender.confirm') }}",
            dataType: "json",
            data: data,
        }).done(function () {
          $button.prop('disabled', true)
        });
    });

Вот упрощенный рабочий пример:

$(".confirm-form").on('submit', function(event) {
    event.preventDefault();
    var $button = $(this).find('button');
    var data = $(this).serialize();
    $.ajax({
        type: "post",
        url: "https://jsonplaceholder.typicode.com/todos/",
        dataType: "json",
        data: data,
    }).done(function () {
      $button.prop('disabled', true)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Confirm 1</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 2</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 3</td>
    <td>
      <form class="confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
</table>