Laravel 在模态窗口中打开路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34379565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel Open a route in a modal window
提问by karmendra
Following code shows a button that when I click routes me to a page where I see the post.
以下代码显示了一个按钮，当我单击该按钮时，会将我路由到我看到帖子的页面。
<a href="{{ route('post.show',$post->id) }}"
class="btn btn-info btn-xs"
role="button"
data-toggle="tooltip" title="Show">
<span class="glyphicon glyphicon-eye-open"></span> Show
</a>
What should I do show the content of the route in a modal dialog window? I was able to figure ut how to use the bootstrap data-toggles to show a modal dialog, but not able to figure out how I can get the routes html content to show in the modal.
我应该怎么做才能在模态对话框窗口中显示路线的内容？我能够弄清楚如何使用引导数据切换来显示模态对话框，但无法弄清楚如何让路线 html 内容显示在模态中。
采纳答案by Gordon Freeman
There are several ways to get it done. But please don't solve it via iframe.
有几种方法可以完成它。但请不要通过 iframe 解决它。
If there should be only text in the modal, put an empty modal into your main layout and fill it with variables.
如果模态中应该只有文本，请在主布局中放置一个空模态并用变量填充它。
If there is a form or something that really should come from an other view, get it with ajax and put it in the modal.
如果有一个表单或某些东西确实应该来自其他视图，请使用 ajax 获取它并将其放入模态中。
EDIT
编辑
AJAX solution:
AJAX解决方案：
Put the CSRF tokeninto your DOM, so you can access it from everywhere. You could need it for POSTrequests. Laravel does not accept POST requests without this token by default.
将CSRF token放入您的 DOM，以便您可以从任何地方访问它。您可能需要它来处理POST请求。默认情况下，Laravel 不接受没有此令牌的 POST 请求。
Also put an empty modal into your body. Later you will fill it with HTMLwhich you'll get with AJAX.
还将一个空的模态放入您的body. 稍后您将填充它HTML，您将使用AJAX.
main.blade.php
main.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
...
<meta name="_token" content="{{ csrf_token() }}" />
</head>
<body>
...
<div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
Modify your HTML:
修改你的 HTML：
<button data-path="{{ route('post.show',$post->id) }}"
class="btn btn-info btn-xs load-ajax-modal"
role="button"
data-toggle="modal" data-target="#dynamic-modal">
<span class="glyphicon glyphicon-eye-open"></span> Show
</button>
Set up the header for your AJAX requests
为您的 AJAX 请求设置标头
custom.js
custom.js
$.ajaxSetup({
headers: {
'X-CSRF-Token': $('meta[name="_token"]').attr('content')
}
});
Look for the click event on your button, get HTML from the requested url (data-pathattribute) and put it into your modal-body.
在您的按钮上查找单击事件，从请求的 url（data-path属性）中获取 HTML并将其放入您的模态正文中。
$('.load-ajax-modal').click(function(){
$.ajax({
type : 'GET',
url : $(this).data('path'),
success: function(result) {
$('#dynamic-modal div.modal-body').html(result);
}
});
});
All of this is not tested and is just a concept ;)
所有这些都没有经过测试，只是一个概念；)
2. EDIT
2. 编辑
If you want to replace more than the modal body, you also have different ways to solve it:
如果你想替换的不仅仅是模态体，你也有不同的解决方法：
- Return
JSONObject with/for different content - Return that
DOM-Node, that you need and place it into your raw modal.
- 返回
JSON具有/针对不同内容的对象 - 返回
DOM-Node您需要的那个，并将其放入您的原始模态中。
回答by Mariana Marica
You could use data attributes to do this; My example is (in Laravel 5.4 with jquery 3): i have a list of users and at the end of each user record i have 2 buttons edit & delete; on delete i have to open a modal that shows a message, informing me of deletion or deactivation (with routes to each user action); so i have done it like so:
您可以使用数据属性来做到这一点；我的例子是（在带有 jquery 3 的 Laravel 5.4 中）：我有一个用户列表，在每个用户记录的末尾我有 2 个按钮编辑和删除；在删除时，我必须打开一个显示消息的模式，通知我删除或停用（每个用户操作的路线）；所以我这样做了：
listing case in td element:
<span class="pull-right cursor-pointer" data-toggle="modal" data-target="#modalUserDeletion" data-user="{{ json_encode( [ 'user_id' => $fos_user->id, 'first_name' => $fos_user->first_name, 'last_name' => $fos_user->last_name, 'user_deletion_route' => route('user.delete', ['id' => $fos_user->id]), 'user_deactivation_route' => route('user.deactivate', ['id' => $fos_user->id]), ] ) }}" onclick="displayCurrentUserInfo(this);"> <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt=""> </span>modal markup:
<div class="modal-body popup-user-deletion"> <div>@lang('translations.user_deletion_modal_explanation')</div><br> <div> <a class="btn btn-danger" href="#" data-user-delete onclick='return confirm("{{ __('translations.user_delete_message') }}");'> <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="" class="svg_image"> @lang('translations.user_deletion_button') </a> </div><br> <div>@lang('translations.user_deletion_or')</div><br> <a href="#" class="deactivate" data-user-deactivate>@lang('translations.user_deactivation_button')</a> </div>js for it:
// function used for displaying info in user deletion popup function displayCurrentUserInfo($this) { var $current_user = $($this); var $current_user_data = $current_user.data('user'); $('[data-user-name]').html("").html("- " + $current_user_data.first_name + " " + $current_user_data.last_name + " -"); $('[data-user-delete]').attr("href", "").attr("href", $current_user_data.user_deletion_route); $('[data-user-deactivate]').attr("href", "").attr('href', $current_user_data.user_deactivation_route); }
在 td 元素中列出案例：
<span class="pull-right cursor-pointer" data-toggle="modal" data-target="#modalUserDeletion" data-user="{{ json_encode( [ 'user_id' => $fos_user->id, 'first_name' => $fos_user->first_name, 'last_name' => $fos_user->last_name, 'user_deletion_route' => route('user.delete', ['id' => $fos_user->id]), 'user_deactivation_route' => route('user.deactivate', ['id' => $fos_user->id]), ] ) }}" onclick="displayCurrentUserInfo(this);"> <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt=""> </span>模态标记：
<div class="modal-body popup-user-deletion"> <div>@lang('translations.user_deletion_modal_explanation')</div><br> <div> <a class="btn btn-danger" href="#" data-user-delete onclick='return confirm("{{ __('translations.user_delete_message') }}");'> <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="" class="svg_image"> @lang('translations.user_deletion_button') </a> </div><br> <div>@lang('translations.user_deletion_or')</div><br> <a href="#" class="deactivate" data-user-deactivate>@lang('translations.user_deactivation_button')</a> </div>js 为它：
// function used for displaying info in user deletion popup function displayCurrentUserInfo($this) { var $current_user = $($this); var $current_user_data = $current_user.data('user'); $('[data-user-name]').html("").html("- " + $current_user_data.first_name + " " + $current_user_data.last_name + " -"); $('[data-user-delete]').attr("href", "").attr("href", $current_user_data.user_deletion_route); $('[data-user-deactivate]').attr("href", "").attr('href', $current_user_data.user_deactivation_route); }
And i recommend defining globally the transmission of CSRF token to all requests with js, by putting the following code in resources/assets/js/app.js like so:
我建议通过将以下代码放在 resources/assets/js/app.js 中来全局定义 CSRF 令牌到所有使用 js 的请求的传输，如下所示：
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});
And of course, you have to also have included a meta tag with the token in your section of your app:
当然，您还必须在您的应用程序部分中包含带有令牌的元标记：
<meta name="csrf-token" content="{!! csrf_token() !!}">
