如何在 Laravel 中打开到模态窗口的路线
Posted
技术标签:
【中文标题】如何在 Laravel 中打开到模态窗口的路线【英文标题】：How to open a route to a modal window in Laravel 【发布时间】：2021-08-22 04:04:38 【问题描述】：如何在模态窗口中打开来自其他表的主题代码信息？
在我的控制器中我有这个
public function viewSubjects($subject)
if(Auth::guard('front')->check())
$user = Auth::guard('front')->user()->username;
else
$user = 0;
$student = Student::where('stud_no', $user)->first();
$student = json_decode(json_encode($student));
$subjects = Subject::where('subj_code', $subject)->get();
return view('front.users.viewmySubjects')->with(compact('student','subjects','subject'));
我有这把刀
<table class="table table-hover">
<thead>
<tr style="color:#1a0dab;font-weight:BOLD">
<th scope="col">SUBJECT CODE</th>
<th scope="col">TIME</th>
<th scope="col">DAYS</th>
<th scope="col">ROOM</th>
<th scope="col">INSTRUCTOR</th>
</tr>
</thead>
<tbody>
@foreach($grades as $grade)
<tr>
<td style="text-align: left;"><a href=" url('/mysubjects/'. $grade->subj_code)"> $grade->subj_code</td>
<td> $grade->time </td>
<td style="font-weight:bold;"> $grade->days </td>
<td> $grade->room </td>
<td style="color:#ff0000;"> $grade->inst_name</td>
</tr>
@endforeach
</tbody>
</table>
我可以在其他刀片上打开它
<table class="table ">
<thead>
<tr >
<th scope="col" style="color:#1a0dab;">SUBJECT CODE</th>
<th scope="col" style="color:#1a0dab"> DESCRIPTION</th>
<th scope="col" style="color:#1a0dab">UNITS</th>
</tr>
</thead>
<tbody>
@foreach($subjects as $subject)
<tr>
<td style="text-align: left;"> $subject->subj_code</td>
<td> $subject->subj_desc </td>
<td> $subject->subj_units </td>
</tr>
@endforeach
</tbody>
</table>
但是我想在模态窗口上看到它，这样每当我点击主题代码时，它就会打开模态窗口并看到信息。
我在下面有这条路线。
Route::get('/mysubjects/subject', 'UsersController@viewSubjects');
这是我到目前为止所做的，我完全一团糟..
<table class="table table-hover">
<thead>
<tr style="color:#1a0dab;font-weight:BOLD">
<th scope="col">SUBJECT CODE</th>
<th scope="col">TIME</th>
<th scope="col">DAYS</th>
<th scope="col">ROOM</th>
<th scope="col">INSTRUCTOR</th>
</tr>
</thead>
<tbody>
@foreach($grades as $grade)
<tr>
<td style="text-align: left;"><a href="#myModal url('/mysubjects/'. $grade->subj_code)" data-toggle="modal"> $grade->subj_code</td>
<!-- Modal -->
<div class="modal fade" id="myModal url('/mysubjects/'. $grade->subj_code)" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table ">
<thead>
<tr >
<th scope="col" style="color:#1a0dab;">SUBJECT CODE</th>
<th scope="col" style="color:#1a0dab"> DESCRIPTION</th>
<th scope="col" style="color:#1a0dab">UNITS</th>
</tr>
</thead>
<tbody>
@foreach($subjects as $subject)
<tr>
<td style="text-align: left;"> $subject->subj_code</td>
<td> $subject->subj_desc </td>
<td> $subject->subj_units </td>
</tr>
@endforeach
</tbody>
</table>
</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>
<td> $grade->time </td>
<td style="font-weight:bold;"> $grade->days </td>
<td> $grade->room </td>
<td style="color:#ff0000;"> $grade->inst_name</td>
</tr>
@endforeach
</tbody>
</table>
我可以为这个使用 javascript/ajax 吗？ 谢谢。。
【问题讨论】：
是的，你可以使用 javascript/ajax 这个 Espresso 你能提供一些例子吗？ 【参考方案1】：所以我认为最简单的解决方案是制作刀片组件：
php artisan make:component AjaxModal
您的组件ajax-modal.blade.php 可能类似于：
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#$id">
$slot
</button>
<!-- Modal -->
<div class="modal fade" id="$id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" id="$id-content">
</div>
</div>
</div>
<script>
$(function ()
$('#$id').on('show.bs.modal', function ()
$('#$id-content').addClass('loading');
$.ajax(
url: @json($url),
success: function (data)
$('#$id-content').append($(data));
,
error: function ()
$('#$id-content').append($('<p>Error</p>'));
,
complete: function ()
$('#$id-content').removeClass('loading');
);
);
);
</script>
您的组件类将是：
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class AjaxModal extends Component
public string $id;
public string $url;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($url, $id)
$this->id = $id;
$this->url = $url;
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
return view('components.ajax-modal');
你的主视图可以是这样的：
@foreach($grades as $grade)
<tr>
<td style="text-align: left;">
@php
$modalUrl = url('/mysubjects/'. $grade->subj_code);
$id = 'grade-'.$grade->id;
@endphp
<x-ajax-modal :url="$modalUrl" :id="$id">
$grade->subj_code
</x-ajax-modal>
</td>
</tr>
@endforeach
请记住，您从控制器返回的任何成绩都将放在modal-content 中，因此结果中应该包含modal-header 和modal-body。
还将“myModalLabel”替换为您将在结果中返回的 id，并将包含屏幕阅读器要从模式中读取的内容
编辑：
对于 7 个组件之前的 Laravel 版本，只需创建一个 .blade.php 文件即可声明（在这种情况下，它与上述相同）。
但是使用它们的方法是：
@php
$parameters = [
'url' => url('/mysubjects/'. $grade->subj_code),
'id' => 'grade-'.$grade->id
];
@endphp
@component('ajax-modal', $parameters)
Trigger
@endcomponent
不幸的是，以前版本的 laravel 不支持组件的支持类或更简单的语法。然而，在这个特殊的用例中，组件类并没有真正做任何事情，所以你可能没有它。
【讨论】：
HI 当我运行 php artisan make:component AjaxModal 命令“make:component”未定义。如何解决这个问题？ ty @ArgieDioquino 这个命令应该在 Laravel 7+ 中可用。如果您使用的是早期版本，则定义组件的方式会有所不同 我不了解组件。但是，如果我要在单个刀片文件中创建一个组件，那么内容会是什么。它只是 ajax-modal 刀片还是我需要添加更多内容，因为组件类在较低的类中不起作用，最后我应该把``` @php $parameters = [ 'url' => url( '/mysubjects/'.$grade->subj_code), 'id' => 'grade-'.$grade->id ]; @endphp @component('ajax-modal', $parameters) 触发 @endcomponent 谢谢... @ArgieDioquino ajax-modal 的内容就足够了，该代码将替换@php....@endphp<x-ajax-modal.. 部分以上是关于如何在 Laravel 中打开到模态窗口的路线的主要内容，如果未能解决你的问题，请参考以下文章