[英]Display another laravel blade view as a modal in a page
大家好,拜托,我是 Laravel 的新手,我正在創建一個項目管理應用程序,我為項目創建了一個索引頁面,我有一個可以創建新項目的按鈕,它完全是另一個刀片文件,我需要將刀片顯示為模態,我嘗試使用@include 和引導模態,但索引頁面是顯示在模態彈出窗口而不是創建頁面中的頁面,我不知道我在哪里弄錯了,我需要幫助,因為有很多地方我需要使用模態。
這是我的索引頁
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-right">
<a class="btn btn-success" data-toggle="modal" href="{{ route('projects.create') }}" data-target="#createModal"> New Project</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-hover">
<thead class="text-primary">
<tr>
<th>No</th>
<th>Name</th>
<th>Description</th>
<th>Date Created</th>
<th>Action</th>
</tr>
</thead>
@foreach ($projects as $project)
<tbody class="table-striped">
<tr>
<td>{{ ++$i }}</td>
<td>{{ $project->name }}</td>
<td>{{ $project->introduction }}</td>
<td>{{ $project->created_at->format('d/m/Y') }}</td>
<td>
<form action="{{ route('projects.destroy',$project->id) }}" method="POST">
<a class="fas fa-eye fa-lg text-warning mr-1" href="{{ route('projects.show',$project->id) }}"></a>
<a class="fas fa-edit fa-lg text-primary mr-1" href=" {{ route('projects.edit',$project->id) }}"></a>
@csrf
@method('DELETE')
<button type="submit" class="fa fa-trash fa-lg text-danger" style="border: none; background-color:white;"></button>
</form>
</td>
</tr>
</tbody>
@endforeach
</table>
{!! $projects->links() !!}
@endsection
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModal" data-attr="{{ route('projects.create') }}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
@include('projects.create')
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
雖然這是創建頁面
@extends('layouts.modal')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>New Project</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('projects.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('projects.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Introduction:</strong>
<textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>location:</strong>
<textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
先感謝您
我后來想出了答案,我做的錯誤是包括
@extends('layouts.app')
@section('content')
所以頁面應該只是表單或者你想要顯示的沒有@extends('layouts.app')
<form action="{{ route('projects.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Introduction:</strong>
<textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>location:</strong>
<textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.