Laravel Open route in modal window

Question

Laravel Open route in modal window

The following code shows the button when I click the routes to the page where I see the message.

<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 by showing the contents of the route in a modal dialog box? I was able to understand how to use the boot data to display a modal dialog, but I was not able to understand how I can get the content of the html routes displayed in modal mode.

+4

twitter-bootstrap laravel laravel-5.1

karmendra Dec 20 '15 at 9:24

source share

2 answers

; ( Laravel 5.4 jquery 3): , 2 ; , , ( ); :

td:

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

:

   <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 :

        // 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("-&nbsp;" + $current_user_data.first_name + " " + $current_user_data.last_name + "&nbsp;-");
        $('[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);
    }

CSRF js, resources/assets/js/app.js :

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

, , :

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

+1

Mariana Marica 19 . '18 12:45

Gordon Freeman · Accepted Answer · 2015-12-20T10:04:21+0000

There are several ways to do this. But please do not solve this with iframe.

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

- -, , ajax .

AJAX:

CSRF token DOM, . POST. Laravel POST- .

body. HTML, 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>

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>

AJAX

custom.js

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

click , HTML- URL- ( data-path) .

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

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

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

;)

2. EDIT

, , :

JSON /
, DOM-Node, , .

Laravel Open route in modal window

More articles: