Laravel 8의 Ajax와 Bootbox 경고 및 확인 통합

17065 단어 bootboxphplaravelajax
원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8

이 게시물에서는 Laravel 8에서 Bootbox 알림 및 확인을 ajax와 통합하는 방법을 공유하고 있습니다. Bootbox를 사용하여 Laravel에서 jquery ajax 삭제를 확인하고 있습니다. 레코드를 삭제할 때 예기치 않은 삭제 버튼 클릭을 방지하기 위해 확인이 필요합니다.

이 예에는 컨트롤러, 모델, 경로 및 블레이드가 있습니다. 아래 단계를 계속 읽으십시오.

노선:




Route::resource('posts', PostsController::class);


제어 장치:




/**
* Remove the specified resource from storage.
*
* @param  \App\Models\Post  $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
    $post->delete();

    return response('Post deleted successfully.', 200);
}


모델:




<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        'title',
        'description',
        'body'
    ];

    use HasFactory;
}


잎:




<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>

        <script type="text/javascript">
          $(document).ready(function() {

            $('.delete-form').on('submit', function(e) {
              e.preventDefault();
              var button = $(this);

              bootbox.confirm({
                  title: "Are you sure?",
                  message: "Your about to delete this post!",
                  buttons: {
                      confirm: {
                          label: 'Yes',
                          className: 'btn-success'
                      },
                      cancel: {
                          label: 'No',
                          className: 'btn-danger'
                      }
                  },
                  callback: function (result) {
                    if(result) {
                      $.ajax({
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: button.data('route'),
                        data: {
                          '_method': 'delete'
                        },
                        success: function (response, textStatus, xhr) {

                          bootbox.alert({
                              message: response,
                              callback: function () {
                                window.location='/posts'
                              }
                          });
                        }
                      });
                    }
                  }
              });


            })
          });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            @if(Session::get('success', false))
              <?php $data = Session::get('success'); ?>
              @if (is_array($data))
                  @foreach ($data as $msg)
                      <div class="alert alert-success" role="alert">
                          <i class="fa fa-check"></i>
                          {{ $msg }}
                      </div>
                  @endforeach
              @else
                  <div class="alert alert-success" role="alert">
                      <i class="fa fa-check"></i>
                      {{ $data }}
                  </div>
              @endif
            @endif

            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all"></th>
                  <th scope="col">Title</th>
                  <th scope="col">Description</th>
                  <th scope="col">Body</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                @foreach($posts as $post)
                  <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>{{$post->title}}</td>
                    <td>{{$post->description}}</td>
                    <td>{{$post->body}}</td>
                    <td>
                        <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
                            @method('delete')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
        </div>
    </body>
</html>


Bootbox에 대한 자세한 내용은 Bootboxdocumentation를 참조하십시오.

이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8를 방문하십시오.

행복한 코딩 :)

좋은 웹페이지 즐겨찾기