Return view html by Ajax | Rex's Personal Site

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>

<?php

use Illuminate\Support\Facades\Config;

@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

<img alt="{{ $item->name }}" class="card-img-top" src="{{ $image }}">

</h5>

狀態: {{ $status }}

<br/>

別名: {{ $item->alias }}

<br/>

Tag ID: {{ $item->tag_id }}

</p>

@if($user->can('dry_device delete') == true)

刪除

</a>

@endif

</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();
    }

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
    }
}();

100

101

102

103

104

105

106

107

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

}

}();

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30