Laravel Open a route in a modal window

Question

Following code shows a button that when I click routes me to a page where I see the post.

<a href="{{ route('post.show',$post->id) }}" 
   class="btn btn-info btn-xs" 
   role="button" 
   data-toggle="tooltip" title="Show">
   <span class="glyphicon glyphicon-eye-open"></span> Show
</a>

What should I do show the content of the route in a modal dialog window? I was able to figure ut how to use the bootstrap data-toggles to show a modal dialog, but not able to figure out how I can get the routes html content to show in the modal.

Answer 1

You could use data attributes to do this; My example is (in Laravel 5.4 with jquery 3): i have a list of users and at the end of each user record i have 2 buttons edit & delete; on delete i have to open a modal that shows a message, informing me of deletion or deactivation (with routes to each user action); so i have done it like so:

• listing case in td element:

              <span class="pull-right cursor-pointer" data-toggle="modal" data-target="#modalUserDeletion"
                    data-user="{{ json_encode(
                          [
                              'user_id' => $fos_user->id,
                              'first_name' => $fos_user->first_name,
                              'last_name' => $fos_user->last_name,
                              'user_deletion_route' => route('user.delete', ['id' => $fos_user->id]),
                              'user_deactivation_route' => route('user.deactivate', ['id' => $fos_user->id]),
                          ]
                      ) }}" onclick="displayCurrentUserInfo(this);">
                  <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="">
              </span>
  

• modal markup:

     <div class="modal-body popup-user-deletion">
          <div>@lang('translations.user_deletion_modal_explanation')</div><br>
          <div>
              <a class="btn btn-danger" href="#" data-user-delete onclick='return confirm("{{ __('translations.user_delete_message') }}");'>
                  <img src="{{ asset('images/svg_icons/trash-16.svg') }}" alt="" class="svg_image">&nbsp;
                  @lang('translations.user_deletion_button')
              </a>
          </div><br>
          <div>@lang('translations.user_deletion_or')</div><br>
  
          <a href="#" class="deactivate" data-user-deactivate>@lang('translations.user_deactivation_button')</a>
      </div>
  

• js for it:

          // function used for displaying info in user deletion popup
      function displayCurrentUserInfo($this) {
          var $current_user = $($this);
          var $current_user_data = $current_user.data('user');
  
          $('[data-user-name]').html("").html("- " + $current_user_data.first_name + " " + $current_user_data.last_name + " -");
          $('[data-user-delete]').attr("href", "").attr("href", $current_user_data.user_deletion_route);
          $('[data-user-deactivate]').attr("href", "").attr('href', $current_user_data.user_deactivation_route);
      }
  

And i recommend defining globally the transmission of CSRF token to all requests with js, by putting the following code in resources/assets/js/app.js like so:

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});

And of course, you have to also have included a meta tag with the token in your section of your app:

<meta name="csrf-token" content="{!! csrf_token() !!}">

Answer 2

There are several ways to get it done. But please don't solve it via iframe.

If there should be only text in the modal, put an empty modal into your main layout and fill it with variables.

If there is a form or something that really should come from an other view, get it with ajax and put it in the modal.

---

EDIT

AJAX solution:

Put the CSRF token into your DOM, so you can access it from everywhere. You could need it for POST requests. Laravel does not accept POST requests without this token by default.

Also put an empty modal into your body. Later you will fill it with HTML which you'll get with AJAX.

main.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta name="_token" content="{{ csrf_token() }}" />
  </head>
  <body>
    ...
    <div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body"></div>
        </div>
      </div>
    </div>
    <script src="custom.js"></script>
  </body>
</html>

---

Modify your HTML:

<button data-path="{{ route('post.show',$post->id) }}" 
   class="btn btn-info btn-xs load-ajax-modal" 
   role="button" 
   data-toggle="modal" data-target="#dynamic-modal">
   <span class="glyphicon glyphicon-eye-open"></span> Show
</button>

---

Set up the header for your AJAX requests

custom.js

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    }
});

Look for the click event on your button, get HTML from the requested url (data-path attribute) and put it into your modal-body.

$('.load-ajax-modal').click(function(){

    $.ajax({
        type : 'GET',
        url : $(this).data('path'),

        success: function(result) {
            $('#dynamic-modal div.modal-body').html(result);
        }
    });
});

---

All of this is not tested and is just a concept ;)

---

2. EDIT

If you want to replace more than the modal body, you also have different ways to solve it:

1. Return JSON Object with/for different content
2. Return that DOM-Node, that you need and place it into your raw modal.