Fatal编程技术网

Twitter bootstrap Laravel在模式窗口中打开路线

twitter-bootstrap laravel

Twitter bootstrap Laravel在模式窗口中打开路线,twitter-bootstrap,laravel,laravel-5.1,Twitter Bootstrap,Laravel,Laravel 5.1,下面的代码显示了一个按钮，当我单击它时，它会将我路由到一个我看到文章的页面 <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> Sh

下面的代码显示了一个按钮，当我单击它时，它会将我路由到一个我看到文章的页面

<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>
我应该如何在模式对话框窗口中显示路线的内容？
我能够理解如何使用引导数据切换来显示模式对话框，但无法理解如何获得要在模式中显示的路由html内容。

有几种方法可以完成。但请不要通过iframe解决它

如果模态中只有文本，则在主布局中放置一个空模态，并用变量填充它

如果有一个表单或其他东西真的应该来自另一个视图，那么使用ajax获取它并将其放入模式中

编辑 AJAX解决方案：

将
CSRF令牌
放入您的DOM中，以便您可以从任何地方访问它。您可能需要它来处理
POST
请求。默认情况下，Laravel不接受没有此令牌的POST请求

同时在
主体中添加一个空模态。稍后，您将使用
HTML
填充它，您将使用
AJAX
获得它


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>


查找按钮上的click事件，从请求的url（
数据路径
属性）获取HTML，并将其放入模式正文中


$('.load-ajax-modal').click(function(){

    $.ajax({
        type : 'GET',
        url : $(this).data('path'),

        success: function(result) {
            $('#dynamic-modal div.modal-body').html(result);
        }
    });
});




所有这些都没有经过测试，只是一个概念；）



2。编辑

如果要替换的不仅仅是模态实体，还可以使用不同的方法来解决：


  • 返回包含/针对不同内容的
    JSON
    对象
    • 

  • 返回所需的
    DOM节点
    ，并将其放入原始模式
    • 

    您可以使用数据属性来实现这一点；
我的例子是（在使用jQuery3的Laravel5.4中）：我有一个用户列表，在每个用户记录的末尾有两个按钮edit&delete；删除时，我必须打开一个显示消息的模式，通知我删除或停用（每个用户操作的路径）；所以我是这样做的：
    

      

    • 在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>

      

      • 

    
我建议通过将以下代码放在resources/assets/js/app.js中，用js全局定义CSRF令牌到所有请求的传输：
    

    $.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});

    
当然，你还必须在你的应用程序部分包含一个元标记和令牌：
    

    <meta name="csrf-token" content="{!! csrf_token() !!}">

    

    

    我喜欢ajax的想法，但我对它知之甚少。你能告诉我如何使用jquery ajax调用调用laravel路由吗？或者您正在使用另一个js库？我已经包含了jquery，但是我不明白如何从ajax调用laravel路由。您的代码是现成的。我唯一不明白的是ajaxSetup带有
    'X-CSRF-Token'：$（'meta[name=“\u Token”]”）。attr（'content'）
    。为什么这是必需的？还有一件事是我的模态具有模态标题、模态正文和模态页脚的模态内容。即使只是在ajax中更新模态体，页眉和页脚也会丢失。有什么线索吗？要澄清一下，你想要的是，通过点击一个链接，Laravel会将你重定向到一个视图，在该视图中，一个模态首先是打开的，其中包含内容，对吗？

       <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">&nbsp;
                @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>

    

            // 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("-&nbsp;" + $current_user_data.first_name + " " + $current_user_data.last_name + "&nbsp;-");
        $('[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);
    }

    

    $.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});

    

    <meta name="csrf-token" content="{!! csrf_token() !!}">