We Keep Coding

wordpress block: Undefined array key

I am writing a wordpress block and I am getting these errors when displaying the block on the output page:
Warning: Undefined array key "title" in C:\xampp\htdocs\project\wp-content\plugins\opisyuslug\opisyuslug.php on line 44
Warning: Undefined array key "description" in C:\xampp\htdocs\project\wp-content\plugins\opisyuslug\opisyuslug.php on line 45
Warning: Undefined array key "image" in C:\xampp\htdocs\project\wp-content\plugins\opisyuslug\opisyuslug.php on line 46
How can I fix this?
PHP code:
function create_block_opisyuslug_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_opisyuslug_block_init' );
function opisyuslug_block() {
wp_register_script(
'opisyuslug-block',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);
register_block_type( 'opisyuslug/opisyuslug', array(
'editor_script' => 'opisyuslug-block',
'render_callback' => 'opisyuslug_block_render',
) );
}
add_action( 'init', 'opisyuslug_block' );
function opisyuslug_block_render($attributes) {
$title = $attributes['title'];
$description = $attributes['description'];
$image = $attributes['image'];
return '<div class="opisyuslug-block">
<h2>' . $title . '</h2>
<p>' . $description . '</p>
<img src="' . $image . '" />
</div>';
}
JS code:
"use strict";
var registerBlockType = wp.blocks.registerBlockType;
var _wp$blockEditor = wp.blockEditor,
RichText = _wp$blockEditor.RichText,
MediaUpload = _wp$blockEditor.MediaUpload;
registerBlockType('opisyuslug/opisyuslug', {
title: 'Opisy usług',
icon: 'block-default',
category: 'common',
attributes: {
title: {
type: 'string',
source: 'html',
selector: 'h3'
},
description: {
type: 'string',
source: 'html',
selector: 'p'
},
image: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src'
}
},
edit: function edit(props) {
var _props$attributes = props.attributes,
title = _props$attributes.title,
description = _props$attributes.description,
image = _props$attributes.image,
setAttributes = props.setAttributes;
var onChangeTitle = function onChangeTitle(newTitle) {
setAttributes({
title: newTitle
});
};
var onChangeDescription = function onChangeDescription(newDescription) {
setAttributes({
description: newDescription
});
};
var onChangeImage = function onChangeImage(newImage) {
setAttributes({
image: newImage
});
};
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
htmlFor: "title"
}, "Tytu\u0142:"), /*#__PURE__*/React.createElement(RichText, {
id: "title",
tagName: "h3",
value: title,
onChange: onChangeTitle
}), /*#__PURE__*/React.createElement("label", {
htmlFor: "description"
}, "Opis:"), /*#__PURE__*/React.createElement(RichText, {
id: "description",
tagName: "p",
value: description,
onChange: onChangeDescription
}), /*#__PURE__*/React.createElement(MediaUpload, {
onSelect: onChangeImage,
type: "image",
value: image,
render: function render(_ref) {
var open = _ref.open;
return /*#__PURE__*/React.createElement("button", {
onClick: open
}, image ? /*#__PURE__*/React.createElement("img", {
src: image
}) : 'dodaj obraz');
}
}));
},
save: function save(props) {
var _props$attributes2 = props.attributes,
title = _props$attributes2.title,
description = _props$attributes2.description,
image = _props$attributes2.image;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement("p", null, description), image && /*#__PURE__*/React.createElement("img", {
src: image
}));
}
});

403 forbidden dont have permission

i am working on laravel web app to upload images into datatable and download that image on click it worked fine(( but i want the uploaded image to be downloaded on click ) until i change the code from return '{!! Html::link('images/u4.png', 'Download') !!}'; to return '{!! Html::link('images/.$doc->image', 'Download') !!}'; and the i am getting this error forbidden dont have permission
i am using xampp localhost
my code for your understanding where i am stuck
index.blade.php
columns: [
// render:function(data,type,full,meta){
// return '<a href="'+data.filepath+'/'+data.fileName + '" download>Download</a>'
// },
// "targets": 0
// { data: 'rownum', orderable: false, searchable: false },
{ data: 'doc_type', name: 'doc_type' },
{ data: 'doc_number', name: 'doc_number' },
{ data: 'doc_date', name: 'doc_date'},
{ data: 'amount', name: 'amount' },
{ data: 'currency', name: 'currency' },
{ data: 'partener', name: '{{ TBL_PARTENER }}.id'},
{ data: 'image', name: 'image',render:function(data,type,full,meta){
// return 'Download'
// return '<a href="/images/.$doc->image" download >Download</a>'
return '{!! Html::link('images/.$doc->image', 'Download') !!}';
// return '{!! Html::link('images/u4.png', 'Download') !!}';
} },
//'image' => ['name' => 'image', 'data' => 'image'],
{ data: 'comments', name: 'comments' },
{ data: 'action', orderable: false, searchable: false}
],
DocumentsController
public function download($file){
$file_path = public_path('images/'.$file);
return response()->download( $file_path);
}
// this code is written in store method
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:6048',
]);
$doc = new Document($request->input()) ;
if($file = $request->hasFile('image')) {
$file = $request->file('image') ;
$fileName = $file->getClientOriginalName() ;
$destinationPath = public_path().'/images/' ;
$file->move($destinationPath,$fileName);
$doc->image = $fileName ;
}
Route
Route::get('/images/{file}','DocumentsController#download');

You have generate a wrong route brother. In the screenshot you have attacked the URL on the browser is localhost/conta/public/images/$doc->image which is not a valid route that's why apache throws "Forbidden Error".
Generating a valid url may solve your issue.

Yii2 - Update data by switch toogle using Ajax/Pjax in GridView

I want to update my data in GridView using Switch Toogle without refresh the current page.
Here is the image:
So I want to update the attribute status using the toogle switch like the image above.
Here is my code:
index.php
<?= GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//'alumni_id',
'tahun_lulus',
'file_excel',
[
'attribute' => 'status',
'format' => 'raw',
'value' => function($data){
if($data->status==0){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => true,
]);
}
else if($data->status==1){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => false,
]);;
}
}
],
//'deleted',
'created_at',
'updated_at',
[ 'class' => 'yii\grid\ActionColumn'],
],
]); ?>
How can I do that with Ajax/Pjax?

Before I suggest you the solution there is something you need to fix as you have redundant code inside the GridView that is below.
[
'attribute' => 'status',
'format' => 'raw',
'value' => function($data){
if($data->status==0){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => true,
]);
}
else if($data->status==1){
return SwitchInput::widget([
'name' => 'status_11',
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive',
],
'value' => false,
]);;
}
}
],
You can just pass the value of the $data->status to the value attribute of the SwitchInput rather than using if(){}else{}.
Then to implement what you are looking for you have to use the pluginEvent option of the SwitchInput and bind the switchChange.bootstrapSwitch event to send an ajax call whenever the status of the SwitchInput is changed so your code for the Griview should look like below
<?php
use kartik\switchinput\SwitchInput;
$js = <<< JS
function sendRequest(status, id){
$.ajax({
url:'/controller/action',
method:'post',
data:{status:status,id:id},
success:function(data){
alert(data);
},
error:function(jqXhr,status,error){
alert(error);
}
});
}
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
echo GridView::widget(
[
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
//'alumni_id',
'tahun_lulus',
'file_excel',
[
'attribute' => 'status',
'format' => 'raw',
'value' => function ($data) {
return SwitchInput::widget(
[
'name' => 'status_11',
'pluginEvents' => [
'switchChange.bootstrapSwitch' => "function(e){sendRequest(e.currentTarget.checked, $data->id);}"
],
'pluginOptions' => [
'size' => 'mini',
'onColor' => 'success',
'offColor' => 'danger',
'onText' => 'Active',
'offText' => 'Inactive'
],
'value' => $data->status
]
);
}
],
//'deleted',
'created_at',
'updated_at',
[ 'class' => 'yii\grid\ActionColumn'],
],
]
);
Note: just make sure you change the url:'/controller/action', to the actual URL and action. If you are not using prettyUrl then you must change it to index.php?r=controller/action.
Edit
I have updated the code above to pass the id of the row along with the status to your action in the controller, the action will get the variables like below.
public function actionUpdate(){
$status = Yii::$app->request->post('status');
$id = Yii::$app->request->post('id');
}

How to add pagination on vue-tables-2 using Laravel rest api?

What should I do to enable pagination on Vue server-table from Laravel endpoint?
My component:
<template>
<div>
<v-server-table :columns="columns" url="/object/find" :options="options">
</v-server-table>
</div>
</template>
<script>
export default {
data () {
return {
columns: ['name', 'type', 'created_by', 'created_at'],
options: {
perPage: 5,
perPageValues: [5, 10, 15, 25, 50, 100],
pagination: {chunk: 5},
dateColumns: ['created_at'],
dateFormat: 'DD-MM-YYYY HH:mm',
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: true,
}
filterable: ['name', 'type','created_by', 'created_at'],
sortable: ['name', 'type', 'created_by', 'created_at'],
requestAdapter (data) {
return {
sort: data.orderBy ? data.orderBy : 'name',
direction: data.ascending ? 'asc' : 'desc',
limit: data.limit ? data.limit : 5,
page: data.page,
name: data.query.name,
created_by: data.query.created_by,
type: data.query.type,
created_at: data.query.created_at
}
},
responseAdapter ({data}) {
return {
data,
count: data.length
}
},
}
}
},
}
</script>
Controller:
public function findObjects(Request $request)
{
$objects = Objects::withTrashed();
$sort = $request->get('sort');
$direction = $request->get('direction');
$name = $request->get('name');
$created_by = $request->get('created_by');
$type = $request->get('type');
$limit = (int)$request->get('limit');
$page = (int)$request->get('page');
$created_at = $request->get('created_at');
if ($sort !== null && $direction !== null) {
$objects->orderBy($sort, $direction);
}
if ($name !== null) {
$objects->where('name', 'like', '%' . $name . '%');
}
if ($created_by !== null) {
$objects->where('created_by', 'like', '%' . $created_by . '%');
}
if ($type !== null) {
$objects->where('type', 'like', '%' . $type . '%');
}
if ($created_at !== null) {
$date_range = json_decode($created_at);
$objects->whereBetween('created_at', [Carbon::parse($date_range->start), Carbon::parse($date_range->end)]);
}
return $objects->get();
}
All filters work fine. When I use LIMIT or TAKE or PAGINATE it will return 5 items and paginate links don't work in the component.
What should I do in my controller and in my component to display for example 5 items on page?

Please go through the documentaction carefully here
You need to return a JSON object with two properties:
data : array - An array of row objects with identical keys.
count: number - Total count before limit.
For example your JSON should look like this:
[
"data": [
{
"name": "Name1",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
},
{
"name": "Name2",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
},
{
"name": "Name3",
"created_at": "01-01-2019 00:00:01,
"updated_at": "02-01-2019 10:12:13",
"pushed_at" : "01-01-2019 00:00:05"
}
],
"count":100
]
In your controller you are not returning total row count for vue-table-2 pagination. Add count in your response will solve your issue
Change you controller code with following code:
public function findObjects(Request $request)
{
$objects = Objects::withTrashed();
$sort = $request->get('sort');
$direction = $request->get('direction');
$name = $request->get('name');
$created_by = $request->get('created_by');
$type = $request->get('type');
$limit = (int)$request->get('limit');
$page = (int)$request->get('page');
$created_at = $request->get('created_at');
if ($sort !== null && $direction !== null) {
$objects->orderBy($sort, $direction);
}
if ($name !== null) {
$objects->where('name', 'like', '%' . $name . '%');
}
if ($created_by !== null) {
$objects->where('created_by', 'like', '%' . $created_by . '%');
}
if ($type !== null) {
$objects->where('type', 'like', '%' . $type . '%');
}
if ($created_at !== null) {
$date_range = json_decode($created_at);
$objects->whereBetween('created_at', [Carbon::parse($date_range->start), Carbon::parse($date_range->end)]);
}
$count = $objects->count();
$objects->offset($limit * ($page - 1))->limit($limit);
$data = $objects->get()->toArray();
return response()->json([
'data' => $data,
'count' => $count
]);
}
And Change Your vuejs code like this
<template>
<div>
<v-server-table :columns="columns" url="/object/find" :options="options">
</v-server-table>
</div>
</template>
<script>
export default {
data () {
return {
columns: ['name', 'type', 'created_by', 'created_at'],
options: {
perPage: 5,
perPageValues: [5, 10, 15, 25, 50, 100],
pagination: {chunk: 5},
dateColumns: ['created_at'],
dateFormat: 'DD-MM-YYYY HH:mm',
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: true,
}
filterable: ['name', 'type','created_by', 'created_at'],
sortable: ['name', 'type', 'created_by', 'created_at'],
requestAdapter (data) {
return {
sort: data.orderBy ? data.orderBy : 'name',
direction: data.ascending ? 'asc' : 'desc',
limit: data.limit ? data.limit : 5,
page: data.page,
name: data.query.name,
created_by: data.query.created_by,
type: data.query.type,
created_at: data.query.created_at
}
}
}
}
},
}
</script>

In order to enable pagination you need to get it done in the SQL statement. If you are using SQL server use OFFSET/FETCH. If you using MYSQL use LIMIT/OFFSET. Use this link as reference:
What is the best way to paginate results in SQL Server

How can jTable work with Symfony 2?

I created a Datagrid with jTable, here is my JavaScript code in twig:
<script type="text/javascript">
$(document).ready(function () {
jQuery('#grid').jtable({
title: 'Table of product',
paging: true,
pageSize: 2,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '{{path("_db_show")}}',
createAction: '{{path("_serverproc")}}?action=create',
updateAction: '{{path("_serverproc")}}?action=update',
deleteAction: '{{path("_serverproc")}}?action=delete'
},
fields: {
id: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '40%'
},
Price: {
title: 'Price',
width: '20%'
},
Description: {
title: 'Description',
width: '30%',
}
}
});
//Load person list from server
$('#grid').jtable('load');
});
</script>
And the following is the php code in controller:
/**
* #Route("/show", name="_db_show")
* #Template()
*/
public function showAction()
{
$product = array({'id' => 1, 'Name' => "test",'Price' => "200",'Description' => "ok"});
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $product;
$JsonResponse = new JsonResponse($jTableResult);
return $JsonResponse;
}
The result I got is:
{"Result":"OK","Records":{"id":1,"Name":"test","Price":"200","Description":"ok"}}
Could someone kindly tell me what should I do to use jTable with Symfony? A working example will be great. Thank you very much.

try with:
$product = array('id' => 1, 'Name' => "test",'Price' => "200",'Description' => "ok");
without {} in array definition;