Кнопка удаления формы Laravel в модальном режиме выходит за пределы элемента формы и не удаляет элемент

Question

Я работаю над CRUD-частью приложения Laravel.

Предполагается, что при нажатии кнопки удаления записи появляется модальное устройство и просит пользователя подтвердить удаление соответствующей записи или нет..

Это мой код внешнего интерфейса.

Мой план A:

Вы можете видеть, что кнопка подтверждения в модале находится внутри формы в коде, но она выходит за пределыэлемент формы в реальном HTML-документе.

Кнопка, которая делает модальный видимым при нажатии

<button id="pj_btn_delete-{{ $project->id }}" 
   class="btn btn-danger pj_btn_delete" type="button" 
   data-toggle="modal" data-target="#pj_modal_delete-{{ $project->id }}">
   Delete</button>

Модальное удаление в блейде

<div id="pj_modal_delete-{{ $project->id }}" class="modal fade pj_modal_delete"
            tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">X</h4>
                </div>
                <div class="modal-body">
                  <p>Are you sure to delete it?</p>
                </div>
                <div class="modal-footer">
                        <button type="button" id="pj_cancel-{{ $project->id }}" class="btn btn-default pj_cancel" data-dismiss="modal">Cancel</button>
                        <form id="pj_form_delete-{{ $project->id }}"
                            action="{{ route('projects.destroy',$project->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" id="pj_delete-{{ $project->id }}"
                                class="btn btn-primary pj_delete">Confirm
                            </button>
                        </form>
                </div>
              </div>
            </div>
        </div>

Кстати, этокод маршрутизации и контроллера

маршруты

Route::resource('admin/projects','ProjectController');

метод удаления в контроллере

 public function destroy(Project $project)
{
    $project->clients()->detach();
    $project->staff()->detach();
    // $project->slack_channels()->detach();
    $project->delete();

    return redirect()->route('projects.index')
                    ->with('success','The deletion is complete');
}

Мой план B:

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

$( ".pj_delete" ).click(function() {

    let pj_id = $(this).attr('id').split('-')[1];
    let pj_form_delete_id = "pj_form_delete-" + pj_id;

    $(pj_form_delete_id).submit();

});

Мой план C:

Я также превратил кнопку подтверждения модальной линии в ссылку наметод удаления.Также не работает.

<a class="btn btn-primary" href="{{ 
 route('projects.destroy',$project->id) }}">Confirm</a>

план C удалить маршрут

Route::delete('admin/project/delete/{id}',array('uses' => 'ProjectController@destroy', 'as' => 'project.delete'));

Ни один из этих подходов не сгенерировал кнопку подтверждения, которая может удалить элемент с соответствующим идентификатором, и я не получил ошибкуво всех этих подходах.Пожалуйста помоги.Спасибо!

Answer 1

Вот решение, которое я придумал для вас (это завершенный план А). Обратите внимание, что я оставил вызовы в языковых файлах, потому что решил, что это пригодится:

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

Для удобства я использую этот пакет Form Builder https://laravelcollective.com/docs/master/html#installation Это не нужно, но вам нужно изменить вызовы для обычных форм HTML и кнопок HTML.

Удачи!

Джереми

// Маршруты веб-администратора web.php

Route::group(['prefix' => 'admin'], function () {
    Route::resource('projects', 'ProjectController', [
        'names'    => [
            'destroy'   => 'destroyproject',
        ]
    ]);
});

// Блейд HTML-формы Просмотр файла: /resources/views/admin/modals/delete-project-modal-form.php

<div class="modal fade modal-danger" id="modal_delete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fa fa-question-circle fa-fw mr-1 text-white"></i>
                    {!! trans('admin.modals.delete-project.title') !!}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">
                        {!! trans('admin.modals.delete-project.close') !!}
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    {!! trans('admin.modals.delete-project.message') !!}
                </p>
            </div>
            <div class="modal-footer">
                {!! Form::open(['method' => 'DELETE', 'route' => ['destroyproject', $projectId], 'role' => 'form', 'id' => 'delete_project_form', 'name' => 'delete_project_form']) !!}
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <meta name="_token" content="{!! csrf_token() !!}" />
                    {!! Form::button('<i class="fa fa-fw fa-close" aria-hidden="true"></i> ' . trans('admin.modals.delete-project.cancel'), array('class' => 'btn btn-outline pull-left btn-light', 'type' => 'button', 'data-dismiss' => 'modal' )) !!}
                    {!! Form::button('<i class="fa fa-fw fa-trash-o" aria-hidden="true"></i> ' . trans('admin.modals.delete-project.confirm'), array('class' => 'btn btn-danger pull-right', 'type' => 'submit', 'id' => 'confirm' )) !!}
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

// Включите вышеупомянутый модальный клинок из вашего клинка

@include('admin.modals.delete-project-modal-form', ['projectId' => $project->id])

// Модальный HTML-триггер в вашем лезвии

<button type="button" class="btn btn-danger btn-sm btn-block delete-project-trigger" data-toggle="modal" data-target="#modal_delete" data-projectid="{{ $project->id }}">
    <i class="fa fa-trash-o fa-fw" aria-hidden="true"></i>
    <span class="hidden-xs hidden-sm hidden-md">
        {{ trans('admin.buttons.delete') }}
    </span>
</button>

// Javascript для включения в ваш клинок для запуска модального

@push('scripts')
    <script type="text/javascript">
        $('.delete-project-trigger').click(function(event) {
            var projectId = $(this).data("projectid");
            $('#modal_delete').on('show.bs.modal', function (e) {
                document.delete_project_form.action = "{{ url('/') }}" + "/admin/projects/" + projectId;
            });
        });
    </script>
@endpush

// Включите это в app.blade.php или в любой используемый вами макет, чтобы убедиться, что вы можете включить sciprts:

@stack('scripts')

// В ProjectController.php // Убедитесь, что вы включили вызов модели проекта в верхней части файла, например:

use App\Models\Project;

// Вот метод destroy в ProjectController.php

/**
 * Remove the specified resource from storage.
 *
 * @param Request $request
 * @param int $id
 *
 * @return \Illuminate\Http\Response
 */
public function destroy(Request $request, $id)
{
    $project = Project::findOrFail($id);

    $project->clients()->detach();
    $project->staff()->detach();
    // $project->slack_channels()->detach();

    $project->delete();

    return redirect()
        ->route('projects.index')
        ->withSuccess(trans('messages.success.project-deleted'));
}

// Файл языковых строк: /resources/lang/en/admin.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Admin language lines
    |--------------------------------------------------------------------------
    |
    */

    'modals' => [
        'delete-project' => [
            'close'     => 'Close',
            'title'     => 'Confirm Delete',
            'message'   => 'Delete this project?',
            'cancel'    => 'Cancel',
            'confirm'   => 'Confirm Delete',
        ]
    ],

];

// Файл языковых строк: /resources/lang/en/messages.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Message language lines
    |--------------------------------------------------------------------------
    |
    */

    'success' => [
        'project-deleted' => 'Project deleted.',
    ],

];

Рабочий файл приведенных примеров для справки:

Пример проекта 1

Маршруты https://github.com/jeremykenedy/larablog/blob/master/routes/web.php#L48

Контроллер https://github.com/jeremykenedy/larablog/blob/master/app/Http/Controllers/Admin/PostController.php#L115

Запрос https://github.com/jeremykenedy/larablog/blob/master/app/Http/Requests/DestroyPostRequest.php

Файлы Blade https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L70

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L87

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/post/edit.blade.php#L93

https://github.com/jeremykenedy/larablog/blob/master/resources/views/admin/modals/delete-modal.blade.php

Пример проекта 2

Маршруты https://github.com/jeremykenedy/laravel-users/blob/master/src/routes/web.php#L15

Контроллер https://github.com/jeremykenedy/laravel-users/blob/master/src/App/Http/Controllers/UsersManagementController.php#L246

Файлы Blade https://github.com/jeremykenedy/laravel-users/blob/master/src/resources/views/usersmanagement/show-user.blade.php#L59

https://github.com/jeremykenedy/laravel-users/blob/master/src/resources/views/usersmanagement/show-user.blade.php#L191

https://github.com/jeremykenedy/laravel-users/blob/master/src/resources/views/usersmanagement/show-user.blade.php#L195

https://github.com/jeremykenedy/laravel-users/blob/master/src/resources/views/modals/modal-delete.blade.php

https://github.com/jeremykenedy/laravel-users/blob/master/src/resources/views/scripts/delete-modal-script.blade.php

Пример проекта 3

Маршруты https://github.com/jeremykenedy/laravel-logger/blob/master/src/routes/web.php#L21

Контроллер https://github.com/jeremykenedy/laravel-logger/blob/master/src/app/Http/Controllers/LaravelLoggerController.php#L141

Файлы Blade https://github.com/jeremykenedy/laravel-logger/blob/master/src/resources/views/logger/activity-log.blade.php#L24

https://github.com/jeremykenedy/laravel-logger/blob/master/src/resources/views/logger/activity-log.blade.php#L132

https://github.com/jeremykenedy/laravel-logger/blob/master/src/resources/views/forms/delete-activity-log.blade.php

https://github.com/jeremykenedy/laravel-logger/blob/master/src/resources/views/scripts/confirm-modal.blade.php

Это можно сделать, и есть 3 живых проекта с этим.

Answer 2

Вы должны указать, какая ошибка была с вашей первой попыткой. Вы просто говорите, что это не сработало.

Для вашего плана B вам нужно добавить # к вашему селектору:

let pj_form_delete_id = "#pj_form_delete-" + pj_id;

... и для вашего плана C вам нужен маршрут GET вместо DELETE, чтобы он работал со ссылкой. Нажатая ссылка генерирует запрос GET.

Route::get('admin/project/delete/{id}',array('uses' => 'ProjectController@destroy', 'as' => 'project.delete'));

При этом вы должны попытаться получить свою первую попытку, используя УДАЛИТЬ и работающую форму. Если вы можете предоставить более подробную информацию о том, что не сработало, кто-то может вам помочь.