Laravel在ajax成功后显示带有条件的子视图

Question

在这一点上，我需要显示成功（或不成功）消息，我喜欢模式，因为它们冻结了（主视图）后面的所有内容并显示带有某种消息的小盒子。 我已经看到了很多示例，但是大多数示例都在每页显示这些“警告”框，我认为我应该有一个视图（称为模式），每次我需要显示它时，我只需传递适当的参数，该视图就会出现。

我做了什么：

• 创建了一个称为模式的视图。
• 使用将接收参数的方法创建了一个控制器。

• 创建到控制器的路由。

    $.ajax({ method: 'POST', url: '/angariacoes/insertImovel', dataType: "json", data: {"_token": "{{ csrf_token() }}",values,eachImage,eachImageThumb}, success: function(response){ window.location.href='/popup/popup'; }, error: function(jqXHR, textStatus, errorThrown) { } }); 

但是现在，我如何显示该视图（具有boostrap模态代码）作为模态？ 任何人？

感谢和问候

Answer 1

将div放在模态主体中，然后您可以将视图作为响应返回：

$.ajax({
        method: 'POST', 
        url: '/angariacoes/insertImovel',
        dataType: "json",
        data: {"_token": "{{ csrf_token()
        }}",values,eachImage,eachImageThumb},
        success: function(response){ 
            $('#myAjaxTarget').html(response);
            $('#myModal').modal('show');
        },
        error: function(jqXHR, textStatus, errorThrown) { 
        }
    });

控制器：

return view('my_view', compact($data));

只要确保实际的模态部分在您要弹出的视图上即可。 创建具有模态内容的单独刀片。

所以我有the_main_view.blade.php，并且在其中输入：

<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="">Modal Title</h4>
            </div>
            <div class="modal-body" id="myAjaxTarget">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我们有一个不同的视图my_view.blade.php通过上面提到的Controller方法返回：

<span>Literally any HTML</span>

因此，ajax调用的响应仅为my_view，您可以使用其替换#myAjaxTarget的HTML内容。 因此，最终模态将如下所示：

<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="">Modal Title</h4>
            </div>
            <div class="modal-body" id="myAjaxTarget">
                <span>Literally Anything</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

然后用$（'＃myModal'）。modal（'show'）方法显示。