AJax로 Laravel 8 및 Laravel 6/7에서 모달을 생성하는 방법
부트스트랩 Modal을 사용하여 프로젝트를 생성, 편집 및 볼 수 있으며, 이것은 모달에 표시해야 하는 Laravel 6/7/8에서 수행하려는 모든 작업으로 확장할 수 있습니다.
Modal은 현재 페이지에서 벗어나지 않고 다른 페이지에서 작업할 수 있도록 도와주므로 현재 위치를 놓치지 않도록 도와줍니다. 우리는 이것을 달성하기 위해 Bootstrap, Jquery 및 Ajax를 사용할 것입니다. Jquery와 Ajax는 동적으로 편집하거나 보려는 항목의 ID가 있는 URL을 모달로 보냅니다.
항상 제 문화이기 때문에 스크린샷과 코드 스니펫이 있는 모든 개발자 수준으로 이 기사를 단순화할 것입니다. 코드만 필요하거나 기사를 따라가다가 실수한 경우 GIthub repo을 방문할 수 있습니다.
더 많은 업데이트를 받으려면 나를 팔로우하려면 내 버튼을 클릭하세요.
앞서 말했듯이 다른 페이지에서 작업을 수행하고 다시 돌아와야 하는 모든 작업은 다른 페이지로 이동하지 않고도 모달을 사용하여 수행할 수 있습니다. 스크립트 태그에 코드를 복사하고 클릭할 버튼의 ID와 표시할 모달의 ID를 변경하기만 하면 됩니다.
모달의 두 가지 크기를 표시할 것입니다. 하나는 작은 모달용이고 다른 하나는 중간 모달용입니다. 부트스트랩은 작은(modal-sm), 중간(기본값), 큰(modal-lg) 크기가 있습니다.
1단계: 앱 설정
2단계: 부트스트랩, jquery, ajax 스크립트 태그 추가
resources/views/layouts/디렉토리에 있는 app.blade.php의 헤드 섹션에서 아래에 다음 스크립트를 추가합니다.
<title>App Name - @yield('title')</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"> </script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"> </script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #9C27B0;
color: white;
text-align: center;
}
body {
background-color: #EDF7EF
}
</style>
3단계: index.blade.php 편집
resources/views/projects/디렉토리의 index.blade.php로 이동하여 아래 코드를 복사하여 붙여넣습니다.
index.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Laravel 8 CRUD </h2>
</div>
<div class="pull-right">
<a class="btn btn-success text-light" data-toggle="modal" id="mediumButton" data-target="#mediumModal"
data-attr="{{ route('projects.create') }}" title="Create a project"> <i class="fas fa-plus-circle"></i>
</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered table-responsive-lg table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">No</th>
<th scope="col">Name</th>
<th scope="col" width="30%">Introduction</th>
<th scope="col">Location</th>
<th scope="col">Cost</th>
<th scope="col">Date Created</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach ($projects as $project)
<tr>
<td scope="row">{{ ++$i }}</td>
<td>{{ $project->name }}</td>
<td>{{ $project->introduction }}</td>
<td>{{ $project->location }}</td>
<td>{{ $project->cost }}</td>
<td>{{ date_format($project->created_at, 'jS M Y') }}</td>
<td>
<form action="{{ route('projects.destroy', $project->id) }}" method="POST">
<a data-toggle="modal" id="smallButton" data-target="#smallModal"
data-attr="{{ route('projects.show', $project->id) }}" title="show">
<i class="fas fa-eye text-success fa-lg"></i>
</a>
<a class="text-secondary" data-toggle="modal" id="mediumButton" data-target="#mediumModal"
data-attr="{{ route('projects.edit', $project->id) }}">
<i class="fas fa-edit text-gray-300"></i>
</a>
@csrf
@method('DELETE')
<button type="submit" title="delete" style="border: none; background-color:transparent;">
<i class="fas fa-trash fa-lg text-danger"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{!! $projects->links() !!}
<!-- small modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="smallBody">
<div>
<!-- the result to be displayed apply here -->
</div>
</div>
</div>
</div>
</div>
<!-- medium modal -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="mediumBody">
<div>
<!-- the result to be displayed apply here -->
</div>
</div>
</div>
</div>
</div>
<script>
// display a modal (small modal)
$(document).on('click', '#smallButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
$('#smallModal').modal("show");
$('#smallBody').html(result).show();
},
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
})
});
// display a modal (medium modal)
$(document).on('click', '#mediumButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
$('#mediumModal').modal("show");
$('#mediumBody').html(result).show();
},
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
})
});
</script>
@endsection
위의 코드에서 프로젝트를 생성하기 위한 앵커 태그에서 href=” ”를 제거하고 이를 data-attr=” “로 교체하고 data-toggle=” “, id=” “및 data-target도 추가했습니다. =” “.
"모달 페이드"클래스로 테이블 아래에 두 개의 div를 만들었습니다. 이 div는 지정된 제목과 모달의 내용이 있는 다양한 크기의 모달을 표시합니다. 모달 div 안에는 modal-dialog 클래스가 있는 div가 있으며 여기에서 모달의 크기를 변경할 수 있습니다.
마지막으로 모달 표시에 jquery, ajax 로직이 포함된 스크립트 태그를 추가했습니다.
스크립트 태그에서 수행한 작업
4단계: 페이지 생성, 편집, 표시 편집
resources/views/projects/디렉토리에 있는 create.blade.php, edit.blade.php 및 show.blade.php로 이동하여 기본 레이아웃의 확장을 제거합니다.
@extends(‘layouts.app’)
@section(‘content’)
@endsection
그게 다야, 우리는 갈 수있어
나를 팔로우하거나 아래에 댓글을 남기거나 제안, 반응 또는 이메일, WhatsApp 또는 전화를 걸 수 있습니다. 내 연락처는 스크린샷에 있습니다.
내 다른 게시물 방문
Laravel 8 CRUD 앱, 간단한 가이드
Kingsconsult ・ 9월 9일 ・ 10분 읽기
#laravel8
#mvc
#crud
#laravel
Laravel 8 인증(등록 및 로그인)
Kingsconsult ・ 9월 17일 ・ 4분 읽기
#beginners
#webdev
#php
#laravel
Reference
이 문제에 관하여(AJax로 Laravel 8 및 Laravel 6/7에서 모달을 생성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kingsconsult/how-to-create-modal-in-laravel-8-and-laravel-6-7-with-ajax-m25텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
