Blade not execute @can @endcan

@junfrian

you should use the Blade directives within Blade templates in Laravel not inside PHP code

try this for reference

 $html.='
 <tr>
     <td>'.$properties->property_id.'</td>
     <td>'.$properties->harga_awal.'</td>
     <td>';

         @can(\'property.info\')
         $html.=' <a href="property/info/'.$properties->property_id.'">
             <button class="btn btn-xs btn-success">INFO</button>
         </a>';
         @endcan

         @can(\'property.edit\')
         $html.='<a href="property/edit/'.$properties->property_id.'">
             <button class="btn btn-xs btn-info">EDIT</button>
         </a>';
         @endcan

         $html.='<a href="property/delete/'.$properties->property_id.'">
             <button type="submit" class="btn btn-danger btn-xs btn-icon-split" onclick="return confirm(\'Yakin ingin menghapus ini ?\')">DELETE</button>
         </a>
     </td>
 </tr>
 ';

@tangtang I don't think in the blade templates you need concatenation for the variables. Only you have to return your HTML+PHP code.

@junfrian

nah just delete the backslash for every @can

 @can('property.info')
 	//code here . . .
 @endcan


 @can('property.edit')
 	//code here . . .
 @endcan

@junfrian

nah. seems like you need the render method for this case. I don't read it completly before.

more like what @dhpandya says

here the new reference

controller

public function fillTableByProject(Request $request) {
    $html = '';
    
    $property = Property::select('*')
        ->where('property_id', 'like', "$request->project_id%")
        ->get();
    
    foreach ($property as $properties) {
        $properties->harga_awal = number_format($properties->harga_awal, 0, ",", ".");
        $html .= view('your.blade.view', ['properties' => $properties])->render();
    }
    
    return response()->json(['html' => $html]);
}

blade

<tr>
    <td>{{ $properties->property_id }}</td>
    <td>{{ $properties->harga_awal }}</td>
    <td>
        @can('property.info')
            <a href="property/info/{{ $properties->property_id }}">
                <button class="btn btn-xs btn-success">INFO</button>
            </a>
        @endcan

        @can('property.edit')
            <a href="property/edit/{{ $properties->property_id }}">
                <button class="btn btn-xs btn-info">EDIT</button>
            </a>
        @endcan

        <a href="property/delete/{{ $properties->property_id }}">
            <button type="submit" class="btn btn-danger btn-xs btn-icon-split" onclick="return confirm('Yakin ingin menghapus ini ?')">DELETE</button>
        </a>
    </td>
</tr>

or using ajax ----------------------------------------------------------

public function fillTableByProject(Request $request) {
    $html = '';
    $property = Property::select('*')
        ->where('property_id', 'like', "$request->project_id%")
        ->get();

    foreach ($property as $properties) {
        $properties->harga_awal = number_format($properties->harga_awal, 0, ",", ".");

        $canInfo = Gate::allows('property.info');
        $canEdit = Gate::allows('property.edit');

        $html .= view('your.blade.view', compact('properties', 'canInfo', 'canEdit'))->render();
    }

    return response()->json(['html' => $html]);
}

ajax

// In your DataTables initialization or wherever you handle the AJAX response
$.ajax({
    // Your AJAX request configuration
    success: function (data) {
        // Process the data and render it into the DataTable
        // ...

        // Process the permissions flags
        if (!data.canInfo) {
            // Disable INFO button
            $('.info-button').attr('disabled', true);
        }

        if (!data.canEdit) {
            // Disable EDIT button
            $('.edit-button').attr('disabled', true);
        }
    }
});

@junfrian

happy to hear you can have the result you want. and yes this is little more hard to understand. but not need to hurry mate. you will get it by time.

update :

and with this ajax dont use the @can, it already defined in controller with

		$canInfo = Gate::allows('property.info');
        $canEdit = Gate::allows('property.edit');

different method but same purpose.

@tangtang

I use it to call data when user select option change

@junfrian

in ajax use it like this (hope your ajax structure like this)

$(document).ready(function () {
    var dataTable = $('#your-dataTable').DataTable({
        ajax: {
            url: '/your-ajax-endpoint',
            dataSrc: '' // Use an empty string to indicate that the data array is at the root of the JSON response
        },
        columns: [
            { data: 'property_id' },
            { data: 'harga_awal' },
            {
                data: null, // Use null for custom rendering
                render: function (data, type, row) {

// another data here

				if (!data.canInfo) {
	return ''; // Return an empty string to hide the button
}else{
	// Return the button HTML if the user has permission
	return '<a href="property/info/' + row.property_id + '"><button class="btn btn-xs btn-success">INFO</button></a>';
}

if (!data.canEdit) {
	return ''; // Return an empty string to hide the button
}else{
	// Return the button HTML if the user has permission
	return '<a href="property/edit/' + row.property_id + '"><button class="btn btn-xs btn-info">EDIT</button></a>';
}
                }
            }
        ]
    });
});

not need to use @can

@tangtang

can you give example what data format fill in EXAMPLE DATA ?

// In your DataTables initialization or wherever you handle the AJAX response
$.ajax({
    // Your AJAX request configuration
    success: function (data) {
       EXAMPLE DATA 
        // Process the permissions flags
        if (!data.canInfo) {
            // Disable INFO button
            $('.info-button').attr('disabled', true);
        }

        if (!data.canEdit) {
            // Disable EDIT button
            $('.edit-button').attr('disabled', true);
        }
    }
});

@junfrian

I call this controller to fill datatables when user change select option. (ajax). its work well

can you share here your ajax for datatables, it more be easy to explain

more like this pattern

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'state_date' },
        { data: 'office' },
        { data: 'extn' }
    ]
} );

it this pattern is familiar ?

@tangtang I hv tried to fill table by action of select option , but nothing happend when i change option

Controller :

public function fillTableByProject(Request $request) {


            if (!$request->project_id) {
            } else {
                    $html = '';
    
                    $property = Property::select('*')
                            ->where('property_id', 'like', "$request->project_id%")
                            ->get();
    
                    foreach ($property as $properties) {
                        $properties->harga_awal = number_format($properties->harga_awal,0,",",".");
                        
                        $canInfo = Gate::allows('property.info');
                        $canEdit = Gate::allows('property.edit');


                        $html .= view('property', compact('properties', 'canInfo', 'canEdit'))->render();
                    }
            }            
        return response()->json(['html' => $html]);
    }

View :

<div class="col">
                        <label for="group">Nama Proyek</label>

                        <select class="form-control" id="project_id" name="project_id">
                            <option value="all">-- pilih nama project --</option>
                            @foreach ($project as $projects)
                            <option value="{{ $projects->project_id }}">{{ $projects->project_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label for="group">Blok</label>
                        <select class="form-control" id="block" name="block" >
                            <option value="all"> ----</option>
                        </select>
                    </div>
                </div>
                <table id="projects" class="table table-striped table-bordered text-nowrap">
                    
                    <thead></thead>
                    <tbody></tbody>
                    
                </table>

Ajax :

<script>
$('body').on('change', '#project_id', function(){
    var dataTable = $('#projects').DataTable({
        ajax: {
            url: "{{ route('property.filltable.byproject') }}?project_id=" + $(this).val(),
            dataSrc: '' // Use an empty string to indicate that the data array is at the root of the JSON response
        },
        columns: [
            { data: 'property_id' },
            { data: 'harga_awal' },
            {
                data: null, // Use null for custom rendering
                render: function (data, type, row) {

                    // another data here
                    if (!data.canInfo) {
                      return ''; // Return an empty string to hide the button
                    }else{
                      // Return the button HTML if the user has permission
                      return '<a href="property/info/' + row.property_id + '"><button class="btn btn-xs btn-success">INFO</button></a>';
                    }

                    if (!data.canEdit) {
                      return ''; // Return an empty string to hide the button
                    }else{
                      // Return the button HTML if the user has permission
                      return '<a href="property/edit/' + row.property_id + '"><button class="btn btn-xs btn-info">EDIT</button></a>';
                    }
                }
            }
        ]
    });
});

@junfrian

this code seems fine. can you see in the web browser console what excaly the cause why it cant show anything ?

@junfrian

it seems like a long way to understand how this logic work mate. 😄

but this is the full code for you (it already tested and run well), hope you can use it too.

(datatables v.1.13.6)

script

<script>
        $(document).ready(function() {
            var dataTable = $('#projects').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('property.filltable.byproject') }}',
                    type: 'GET',
                    data: function(d) {
                        d.project_id = $('#project_id').val();
                    },
                },
                columns: [{
                        data: 'property_id',
                        name: 'property_id'
                    },
                    {
                        data: 'harga_awal',
                        name: 'harga_awal'
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            var actionsHtml = '';
                            if (data.canEdit) {
                                actionsHtml += '<a href="property/info/' + row.id + '"><button class="btn btn-xs btn-success">INFO</button></a>';
                            }
                            if (data.canInfo) {
                                actionsHtml += '<a href="property/edit/' + row.id + '"><button class="btn btn-xs btn-info">EDIT</button></a>';
                            }
                            return actionsHtml;
                        }
                    }
                ]
            });

            $('#project_id').on('change', function() {
                dataTable.ajax.reload();
            });
        });
    </script>

controller

public function fillTableByProject(Request $request)
    {
        $project_id = $request->input('project_id');
        $query = Property::select('*');

        if ($project_id) {
            $query->where('property_id', $project_id);
        }

        $draw = $request->input('draw');
        $start = $request->input('start');
        $length = $request->input('length');

        $recordsTotal = Property::count(); // total records without filtering
        $recordsFiltered = $query->count(); // total records with filtering

        $data = $query->skip($start)->take($length)->get();

        // Build the actions column HTML
        $actions = [];
        foreach ($property as $properties) {
            $properties->harga_awal = number_format($properties->harga_awal, 0, ",", ".");
            $canInfo = Gate::allows('property.info'); // replace this logic with your logic 
            $canEdit = Gate::allows('property.edit'); // replace this logic with your logic
            $properties->canInfo = $canInfo;
            $properties->canEdit = $canEdit;
            $actions[] = $properties;
        }

        $response = [
            'draw' => (int)$draw,
            'recordsTotal' => $recordsTotal,
            'recordsFiltered' => $recordsFiltered,
            'data' => $data,
            'actions' => $actions, // include the actions column
        ];

        return response()->json($response);
    }

@tangtang Thanks, but got error : DataTables warning: table id=projects - Ajax error. For more information about this error, please see http://datatables.net/tn/7

I'm sorry , as u said above its tested and run well, can u please check my view ?

@extends('base')

@section('title', 'Property')

@section('header_title', 'Property')

@section('content')

<div class="content-wrapper">
    <div class="content-header">
      <div class="container">
        <div class="row mb-2">
        </div>
      </div>
    </div>
    <div class="content">
      <div class="container" style="min-height: 100vh">
        <div class="row">
          <div class="card card-primary" style="margin:100px auto 100px auto; min-width: 50vw">
            <div class="card-header">
              <div class="card-title">Property</div>
            </div>
              <div class="card-body table-responsive p-5">
                
                <div class="row mb-5">
                    <div class="col">
                        <label for="group">Nama Proyek</label>

                        <select class="form-control" id="project_id" name="project_id">
                            <option value="all">-- pilih nama project --</option>
                            @foreach ($project as $projects)
                            <option value="{{ $projects->project_id }}">{{ $projects->project_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label for="group">Blok</label>
                        <select class="form-control" id="block" name="block" >
                            <option value="all"> ----</option>
                        </select>
                    </div>
                </div>
                <table id="projects" class="table table-striped table-bordered text-nowrap">
                    
                    <thead></thead>
                    <tbody></tbody>
                    
                </table>
                <div class="float-right mt-5">
                  @can('property.create')
                  <a href="{{ route('property.create') }}">
                    <button class="btn btn-primary">+ Property</button>
                  </a>
                  @endcan
                  <a href="{{ route('dashboard') }}">
                    <button class="btn btn-primary">Cancel</button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
<script>
        $(document).ready(function() {
            var dataTable = $('#projects').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('property.filltable.byproject') }}',
                    type: 'GET',
                    data: function(d) {
                        d.project_id = $('#project_id').val();
                    },
                },
                columns: [{
                        data: 'property_id',
                        name: 'property_id'
                    },
                    {
                        data: 'harga_awal',
                        name: 'harga_awal'
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            var actionsHtml = '';
                            if (data.canEdit) {
                                actionsHtml += '<a href="property/info/' + row.id + '"><button class="btn btn-xs btn-success">INFO</button></a>';
                            }
                            if (data.canInfo) {
                                actionsHtml += '<a href="property/edit/' + row.id + '"><button class="btn btn-xs btn-info">EDIT</button></a>';
                            }
                            return actionsHtml;
                        }
                    }
                ]
            });

            $('#project_id').on('change', function() {
                dataTable.ajax.reload();
            });
        });
    </script>
@endsection

@junfrian

nah mate the code seems like fine. and duplicated it and tested. it worked. maybe the cause of error is variable name or database query from your controller. (you can check it in console)

and you should check this link

https://bruhtangtang.blogspot.com/2023/10/you-encounter-something-like-this-error.html

not the scam link 😂😂😂😂

I already explained there what the possibility cause the error for you. (just for you mate 😂😂😂😂)

@tangtang Yes. you right, error in query and $property . Thank you so much. and ... how to hide button info/edit/delete with @can direcective ?

$canInfo = Gate::allows('property.info'); // replace this logic with your logic 
$canEdit = Gate::allows('property.edit'); // replace this logic with your logic

I hv route like this, using spatie permission and work well in another view

Route::get('property/info/{id}', [PropertyController::class, 'info'])->middleware('can:property.info')->name('property.info');
    Route::get('property/edit/{id}', [PropertyController::class, 'edit'])->middleware('can:property.edit')->name('property.edit');

@junfrian

using this method you can't do it with @can because it not part of blade (just in your case and in this ajax and this blade btw). it will read as string not function. so it will just show @can in your web view later.

that's why use it in controller

$canInfo = Gate::allows('property.info');
$canEdit = Gate::allows('property.edit');

is it work ?

but with this route and your privilege in auth/middleware

Route::get('property/info/{id}', [PropertyController::class, 'info'])->middleware('can:property.info')->name('property.info');
    Route::get('property/edit/{id}', [PropertyController::class, 'edit'])->middleware('can:property.edit')->name('property.edit');

seems like you don't need to add this canEdit or canInfo. if the login account with no rights clicked the button it will be blocking by your middleware logic.

update :

but yes the button will always appear

@tangtang when I click the button link goes to http://localhost:8000/property/edit/undefined

@junfrian

did you change the id with your actual parameter here. from the first question, seems like the real parameter is property_id

this is the reference

<a href="property/info/' + row.property_id + '"><button class="btn btn-xs btn-success">INFO</button></a>

@tangtang it works, thank you so much,

@junfrian

glad to hear that you can address the issue. it is the first step towards progress and understanding the process or flow of the application you've built.

you're doing great. keep the good work.

@tangtang

can we apply it to table (not data table) ?

@junfrian

it will be more easy and you need to change the flow a little bit.

Helo @tangtang , can you please explain about code below? because I tried same method in another controller, got error

$draw = $request->input('draw');
$start = $request->input('start');
$length = $request->input('length');

Code I hv tried with another controller like below, and got error

SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1 SELECT * FROM marketings OFFSET 0

public function index(Request $request) {
        $query = Marketing::select('*');

        $draw = $request->input('draw');
        $start = $request->input('start');
        $length = $request->input('length');

        $recordsTotal = Marketing::count(); // total records without filtering
        $recordsFiltered = $query->count(); // total records with filtering

        $data = $query->skip($start)->take($length)->get();

        $user = Auth::user();
        $permissions  = $user->getAllPermissions();

        // Build the actions column HTML
        $actions = [];
        foreach ($data as $marketings) {
            $marketings->marketing_id = $marketings->marketing_id;
            $marketings->marketing_name = $marketings->marketing_name;

            if($user->can('marketing-staff-info')) {
                 $canInfo = true;
            }
            else {
                 $canInfo= true;
             }
            
             if($user->can('marketing-staff-edit')) {
                 $canEdit = true;
            } else {
                 $canEdit = false;
            }
            
            if($user->can('marketing-staff-delete')) {
                $canDelete = true;
           } else {
                $canDelete = false;
           }

            $marketings->canInfo = $canInfo;
            $marketings->canEdit = $canEdit;
            $marketings->canDelete = $canDelete;
            $actions[] = $marketings;
        }

        $response = [
            'draw' => (int)$draw,
            'recordsTotal' => $recordsTotal,
            'recordsFiltered' => $recordsFiltered,
            'data' => $data,
            //'actions' => $actions, // include the actions column
        ];

        return response()->json($response);   
    }

Ajax :

<script>
    $(document).ready(function() {
    $('#tblMarketingStaff').children('thead').remove();
    //$("option[value='all']").remove(); 
    $('#tblMarketingStaff').append('<thead><tr><th>ID Marketing</th><th>Nama Marketing</th><th>Aksi</th></tr></thead>');
        var dataTable = $('#tblMarketingStaff').DataTable({
            //processing: true,
            info: false,
            searching: false,
            "bDestroy":true,
            //dom: 'Bfrtip',
            "pageLength": 10,
            "language": {
                "search": "Cari  "
            },
            serverSide: true,
            ajax: {
                url: '{{ route('marketing-staff-index') }}',
                type: 'GET',
            },
            
            columns: [
                {
                    data: 'marketing_id',
                    name: 'marketing_id'
                },
                {
                    data: 'marketing_name',
                    name: 'marketing_name'
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        var actionsHtml = '';
                        if (data.canInfo) {
                            actionsHtml +='<button value="' + row.marketing_id + '" class="btn btn-xs btn-success openModalMarketingStaffInfo" style="margin-right: 5px;">Info</button></a>';
                        }
                        if (data.canEdit) {
                            actionsHtml +='<button value="' + row.marketing_id + '"class="btn btn-xs btn-warning openModalMarketingStaffEdit" style="margin-right: 5px;">Edit</button></a>';
                        }
                        if (data.canDelete) {
                            actionsHtml +='<button value="' + row.marketing_id + '" class="btn btn-xs btn-danger openModalMarketingStaffDelete" onclick ="return confirm(\'Yakin menghapus ini ?\')">Delete</button></a>';
                        }
                        return actionsHtml;
                    }
                }
            ]
        });
    });
</script>
{{-- ajaxFillTableMarketingEnd --}}

@junfrian

did you try to dd this code

$start = $request->input('start');
$length = $request->input('length');

make sure they always have the value

and for future reference, do another question in new discusion, so the other can see if the first case is solved or not, not only me, they can help too.

Hi @tangtang , its solved. I have missed something. thanks