Laravel show subview with condition after ajax success - laravel

Question

I´m in a point where i need to show a success(or not) message, i like modals because they freeze everything behind(the main view) and show that little box with some kind of message. I have seen many examples, but most of them are showing these "alert" boxes per page and i think i should have a view(called modal) and every time i need to show it, i just pass the proper arguments and the view would show up.
What i have done:
Created a view called modal.
Created a controller with a method that will receive the arguments.
Created a route to the controller.
$.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) {
}
});
But now, how do i show that view(that has boostrap modal code) as a modal? Anyone?
Thanks, regards

Answer 1

Put a div inside of the modal body and then you can just pass back a view as your response:
$.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) {
}
});
Controller:
return view('my_view', compact($data));
Just make sure the actual modal part is on the view that you want the pop up to be. Create a separate blade that has the modal content.
So I have the_main_view.blade.php, and in it I have put:
<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">×</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>
And we have a different view, my_view.blade.php that is being returned via the Controller method mentioned above:
<span>Literally any HTML</span>
So the response from the ajax call is just my_view, which you use to replace the HTML content of #myAjaxTarget with. So the end modal will look like this:
<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">×</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>
Which is then shown with the $('#myModal').modal('show') method.