Laravel show subview with condition after ajax success

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">&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>

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">&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>

Which is then shown with the $('#myModal').modal('show') method.