Return view html by Ajax

view()->render()

https://stackoverflow.com/questions/28634712/how-can-i-return-a-view-from-an-ajax-call-in-laravel-5

View

<?php
use Illuminate\Support\Facades\Config;
?>
<div class="row">
    @foreach($devices as $key => $item)
        @php
            switch($item->status){
                case 1:
                    $image = BASE_URL . '/images/wireless_blue.png';
                    break;
                case 2:
                    $image = BASE_URL . '/images/wireless_gray.png';
                    break;
                case 3:
                    $image = BASE_URL . '/images/wireless_red.png';
                    break;
                default:
                    $image = BASE_URL . '/images/wireless_gray.png';
            }

            $config = Config::get('admin.dry_status');
            $status = $config[$item->status];
        @endphp

        <div class="col-md-3">
            <div class="card" data-id="{{ $item->id }}">
                <img alt="{{ $item->name }}" class="card-img-top" src="{{ $image }}">
                <div class="card-body">
                    <h5 class="card-title">
                        {{ $item->name }}
                    </h5>
                    <p class="card-text">
                        狀態: {{ $status }}
                        <br/>
                        別名: {{ $item->alias }}
                        <br/>
                        Tag ID: {{ $item->tag_id }}
                    </p>
                    @if($user->can('dry_device delete') == true)
                        <a class="btn btn-primary delete_device" data-id="{{ $item->id }}" href="#">
                        刪除
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

Controller

    public function device_view_data(Request $req){
        $data = [];

        $devices = DryDeviceM::orderBy('name', 'asc')
            ->get();
        $data['devices'] = $devices;

        //$data['user'] = $this->guard()->user();

        return view('admin.partial.devices', $data)->render();
    }

Javascript

$(document).ready(function(){
    dt_app.init();

    $('#new_item').on('click', function(e){
        var params = {
        }

        window.location.href = base_url + '/admin/' + controller + '/create';
    });

    $('#refresh').on('click', function(e){
        dt_app.refresh();
    });
});

var dt_app = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $("#device_wrap");

        $c.delegate('.delete_device', 'click', function(){
            var $this = $(this);
            var id = $this.data('id');

            if(confirm('確定刪除此設備?') == true){
                delete_item(id);
            }
        });

        $c.delegate('.card', 'click', function(){
            var $this = $(this);
            var id = $this.data('id');

            var params = {
                id: id
            }
            window.location.href = base_url + '/admin/' + controller + '/edit?' + $.param(params);
        });

        refresh();
    }

    function get_data(){
        var params = {
        }
        //console.log(params);
        //return;

        $.ajax({
            type: 'get',
            url: base_url + '/admin/' + controller + '/device_view',
            data: params,
            dataType: 'html',
            success: function(data){
                //console.log(data);
                $c.html(data);
            },
            error: function(data){
                console.log(data);
                var errors = data.responseJSON;
                show_response_error(errors);
            }
        });
    }

    function refresh(){
        get_data();
    }

    function delete_item(id){
        var params = {
            id: id
        }
        //console.log(params);
        //return;

        $.ajax({
            type: 'post',
            url: base_url + '/admin/' + controller + '/delete',
            data: params,
            dataType: 'json',
            success: function(data){
                if(typeof data.status == 'undefined'){
                    alert(data);
                }else if(data.status == 'fail'){
                    alert(data.message);
                }else{
                    //alert('Item is deleted.');
                    refresh();
                }
            },
            error: function(data){
                console.log(data);
                var errors = data.responseJSON;
                show_response_error(errors);
            }
        });
    }

    return {
        init: init, 
        refresh: refresh
    }
}();