Попытка удалить данные, используя модальное всплывающее окно, не получая правильный идентификатор выбранного элемента - PullRequest
0 голосов
/ 22 апреля 2019

У меня есть табличное представление со многими записями, и я хочу иметь кнопку удаления для каждой записи, которая предложит пользователю модальное окно для подтверждения удаления.У меня есть правильные кнопки (если смотреть из таблицы), чтобы запросить модальный режим, но кнопка в модальном режиме, которая является кнопкой для подтверждения удаления, не передает правильный идентификатор.Например, у меня есть 3 записи в моей таблице, с идентификаторами 1, 2 и 3. Но способ, которым я кодирую свою таблицу (покажу код ниже), делает ее там, где пользователь нажимает любую кнопку удаления наВ нужной записи появляется модальное окно с кнопкой «Удалить (подтвердить)» с идентификатором самой новой из всех записей.В этой ситуации будет идентификатор 3. Я хочу, чтобы он передал правильный идентификатор.То есть, если я хочу удалить запись 1, она пройдет ID 1 и запись 2 и т. Д.

Я попытался выяснить, что я сделал неправильно с моим JavaScript, но, похоже, все в порядке, и пока что ничего не помогает.Я попытался поместить весь модал в свою таблицу, но у него все еще есть та же проблема ...

<!-- DataTables Example -->
    <div class="card mb-3">
      <div class="card-header">
        <i class="fas fa-table"></i>
        Advertisements 
        <div></div>
      </div>

      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
              <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Image</th>
                <th>Status</th>
                <th>Sort No.</th>
                <th>Updated By</th>
                <th>Expired At</th>
                <th>Updated At</th>
                <th> </th>
                <th> </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($advertisements as $advertisement)
              <tr>
                <td>{{ $advertisement->media->title }}</td>
                <td>{{ $advertisement->media->description }}</td>
                <td><img src="{{asset('/storage/uploads/images/').'/'.$advertisement->image}}" height="65" width="100"></td>
                @php
                  if ($advertisement->media->status == 1){
                    $current_status = 'Active';
                  } elseif ($advertisement->media->status == 0){
                    $current_status = 'Inactive';
                  } 
                @endphp
                <td>{{ $current_status }}</td>
                <td>{{ $advertisement->media->sort}}</td>                        
                <td>{{ $advertisement->media->admin->username}}</td>
                <td>{{ $advertisement->expired_at}}</td>
                <td>{{ $advertisement->media->updated_at}}</td>
                <td><a href="/advertisements/{{$advertisement->id}}/edit" class="btn btn-success">Edit</td>
                <td>
                <button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-url="/advertisements/{{$advertisement->id}}">Delete , {{$advertisement->id}}</button>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
    </div>

Над кодом показан вид таблицы с моими данными, и у каждой записи будет кнопка удаления рядом с ней.,

<form action="" method="post" id="deleteForm">
    @method('DELETE')
    @csrf 
      <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure you want to delete this record?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="delete" class="btn btn-danger">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </form>

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

Код ниже - это JavaScript, который обрабатывает удаление и передачу идентификатора идействие: -

$(document).ready(function () {
    $('.delete-record').click(function () {
        var url = $(this).attr('data-url');
        $("#deleteForm").attr("action", url);
    });
});

Я хочу, чтобы он передал правильный идентификатор.Это означает, что если я хочу удалить запись 1, она передаст идентификатор 1 и запись 2 и т. Д.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Попробуйте с этим,

Вместо URL вы должны использовать маршрут,

<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-action="{{ route('advertisements.destroy', $advertisement->id) }}">Delete , {{$advertisement->id}}</button>

В вашем коде JS

$("#deleteForm").attr("action", $(this).data('action'));

И если вы не поставитеВаш модальный код за пределами foreach, затем вставьте его в конец файла

Надеюсь, это поможет:)

0 голосов
/ 22 апреля 2019

Вы пытаетесь отправить свою форму методом POST, но в ней нет таких данных, как рекламный идентификатор.

Не могли бы вы показать свой файл маршрута web.php?

Потому что, если здесь используется метод POST, вам следует добавить скрытый ввод в форму.

...