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'）方法顯示。