Laravel: Is it possible to load blade view into a jquery modal? - php

Question

Below is my main blade file that I want to load into modal.
#extends('layouts.app')
#section('title', trans('pages.jobs.show.header_title') ?: trans('pages.jobs.show.title'))
#section('navigation')
#endsection
#section('content')
<div class="container">
<div class="page-dashboard">
{{ all teh content loaded: such as SVG grapgh using JS }}
</div>
</div>
<nav class="container-fluid nav-bottom" data-js="nav-bottom">
<div class="nav-bottom__overlay"></div>
</nav>
#push('scripts')
<script src=""></script>
#endpush
#endsection
I have tried using bootstarp.js modal but the modal is not loading, it loads in the main page.
Is it possible to load an entire blade with its own CSS and js included?
Kindly provide me any example. Maybe, I have to use ajax:
$('#modellink').click(function(){
$.ajax({
type : 'GET',
url : $(this).data('path'),
success: function(result, url) {
$('.modal-body').html(result);
$('#myModal').modal('show');
$('.modal-container').load($(this).data('path'),function(result){
$('#myModal').modal({show:true});
});
}
});
});

Answer 1

If you have a file call modal.blade.php, which has all the HTML, CSS and JS for that modal, you can include it on any page with #include("modal"). For example:
modal.blade.php
<style>...</style>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">...</script>
Then, in your main file:
main.blade.php
#extends("layout")
#section("content")
#include("modal")
<div>...</div>

Answer 2

Return the HTML string
// SomeController::getModal()
return view('layouts.someview', $data_array)->render();
Load it into the modal
$.ajax(
// blah,
// blah,
success: function(response) {
$('#modal').html(response)
}
)

Answer 3

In short - yes.
Im not sure how you're loading your modal - as you don't provide much information, but, if you can load an external page into your modal, then simply point to the laravel route that displays your blade view.
Alternatively, use an #include('modal.name.blade') and have that as part of the page which uses the modal with the correct html/css of course for your relevant modal script.