wordpress block: Undefined array key - javascript

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

Related

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.

Vue.js Axios post sending null value

I am struggling with a problem using axios.
Vue file:
<script>
export default {
name: 'npcs-list',
data () {
return {
data: '',
index: '',
dialogues: '',
input: {
npc_name: '',
},
npc_id: '',
npc_name: '',
npc_start_dialogues:'',
dialogues: [],
fields: [{
name: 'id',
callback: 'stringToInt'
},
{
name: 'name'
},
{
name: 'start_dialog'
},
{
name: 'actions', // <----
title: 'Akcje',
titleClass: 'center aligned',
dataClass: 'center aligned'
}
],
css: {
pagination: {
wrapperClass: 'pagination pull-right',
activeClass: 'btn-primary',
disabledClass: 'disabled',
pageClass: 'btn btn-border',
linkClass: 'btn btn-border',
icons: {
first: '',
prev: '',
next: '',
last: ''
}
}
}
}
},
components: {
Vuetable,
VuetablePagination,
VuetablePaginationInfo
},
methods: {
insertNPC () {
const data = this
if (this.input.npc_name != '' && this.npc_start_dialogues != '') {
axios.post('http://localhost/test/Quests/endpoints/insert.npc.php', {
npc_name: 'dupa',
npc_startdialog: 'dupa2'
})
.then((response) => {
data.status = response.data
})
.catch(function (error) {
console.log(error)
})
if (data.status == '1') {
alert('Działa!')
} else {
alert('Taki tag już istnieje!')
}
} else {
alert('Brak wystarczającej ilości danych')
}
},
showModal(data) {
this.$refs.myModalRef.show()
this.data = data,
this.npc_id = data.id,
this.npc_name = data.name,
this.npc_start_dialogues = data.start_dialog.split(";")
},
hideModal () {
this.$refs.myModalRef.hide()
},
onHidden (evt){
this.npc_id = '',
this.npc_name = '',
this.npc_start_dialogues = ''
},
log (data) {
console.log(data)
},
editDialogue (data) {
this.$router.push({
name: 'editDialogues',
params: {
id: data
}
})
},
editOption (data) {
this.$router.push({
name: 'editOptions',
params: {
id: data
}
})
},
}
</script>
PHP endpoint:
<?php
header('Content-Type: text/html');
include_once '../Checkers/CheckIfNPCExists.php';
include_once '../Inserts/InsertNPC.php';
$requestBody = file_get_contents('php://input');
$data = json_decode($requestBody);
$status = new CheckIfNPCExists();
var_dump($data);
$result = $status->uniqueTest($data->npc_name);
if($result == '0'){
$npc_class = new InsertNPC();
$npc_result = $npc_class->createNew($data->npc_name,$data->npc_startdialog);
echo $npc_result;
}
$result is giving me an error about getting non-object property of 'npc_name'.
var_dump of $data shows in Chrome Preview:
object(stdClass)[1]
public 'npc_name'
but in Response slightly more (xdebug log):
<pre class='xdebug-var-dump' dir='ltr'>
<small>C:\xampp\htdocs\test\Quests\endpoints\insert.npc.php:12:</small>
<b>object</b>(<i>stdClass</i>)[<i>1</i>]
<i>public</i> 'npc_name' <font color='#888a85'>=></font> <small>string</small> <font color='#cc0000'>'dupa'</font> <i>(length=4)</i>
<i>public</i> 'npc_startdialog' <font color='#888a85'>=></font> <small>string</small> <font color='#cc0000'>'dupa2'</font> <i>(length=5)</i>
</pre>
I would appreciate any help, any tips are welcome as well. The text limit is so unhandy.

How to connect bootstrap year calendar with mysql base

I got problem with connecting bootstrap year calendar from bootstrap-year-calendar.com with my mysql base.
I make getEvents.php file, which is connecting with base and taking data of events. When I printing result from this file then all is ok and i see my events, but when I trying to include this result to DataSource in calendar script then I dont see any events.
Someone could send some examples how to do it?
My codes:
getEvents.php
<?php
require "bdd.php";
$result = $bdd->prepare("SELECT `id`, `title`, `start`, `end`, `color`, `dsc`, `zlec`, `stanowisko` FROM `events`");
$result->execute();
$event_array = array();
$result->setFetchMode(PDO::FETCH_ASSOC);
while ($record = $result->fetch()) {
$event_array[] = array(
'id' => $record['event_id'],
'title' => $record['event_name'],
'start' => $record['start_event'],
'end' => $record['end_event'],
);
}
echo json_encode($event_array);
?>
calendar script I change to
dataSource: ['getEvents.php']
ACTUALIZATION
#JeffHuijsmans Im not sure how to fix it.
Please tell me how to fetch into dataSource function result from my getEvents.php file ?
echo from getEvents file return
[{"event_id":"1","event_title":"XXX","event_start":"2017-10-04","event_end":"2017-10-06"}]
Default data in dataSource is looking like this:
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
}]
A "workaround" is iterate the data array and generate a string with data in calendar format.
Here works fine, hope helps.
Sample:
private function convertYearData(array $yearData) : string
{
if (empty($yearData)) {
return 'null';
}
$data = '';
foreach ($yearData as $event) {
if (empty($data)) {
$data = "[{id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
} else {
$data .= ", {id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
}
}
$data .= ']';
return $data;
}
$yearDataArr = [
[
'id' => '1',
'name' => 'Pesquisa Teste',
'type' => 'Pesquisa',
'color' => '#4da539',
'startDate' => '2017-04-28 02:00:00',
'endDate' => '2017-04-30 12:00:00',
],
[
'id' => '2',
'name' => 'Media Teste',
'type' => 'Media',
'color' => '#00afe8',
'startDate' => '2017-04-25 02:00:00',
'endDate' => '2017-05-12 12:00:00',
],
[
'id' => '3',
'name' => 'Email Marketing Teste',
'type' => 'Email Marketing',
'color' => '#af2828',
'startDate' => '2017-03-25 02:00:00',
'endDate' => '2017-05-17 12:00:00',
],
];
$yearData = $this->convertYearData($yearDataArr);
after, in your html just echo your var $yearDate:
$('#calendar').calendar({
language:'pt',
enableContextMenu: false,
enableRangeSelection: true,
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].type + '</div>'
+ '<div class="event-type">' + e.events[i].name + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: <?php echo $this->yearData; ?>
});

Telerik Gantt chart

I have 2 problems
Dynamically generated JSON object (jsonString) is empty in kendo.data.GanttDataSource.
How do I call the dataSource.read() here ?
var jsonObj = []; var jsonString = null;
$(document).ready(function () {
var url = test.siteUrl() + "/_vti_bin/omg/tt.svc/Read/" + _campaign.CampaignWebID + "/" + _campaign.CampaignListID + "/" + _campaign.ID + "?t=" + of360.t();
$.getJSON(url, function (data) {
$.each(data, function (i) {
item = {}
item['ID'] = data[i].ID;
item['ChannelDescription'] = data[i].ChannelDescription;
item['Start'] = data[i].Start;
item['End'] = data[i].End;
item['PercentageComplete'] = data[i].BriefingState/10;
item['Name'] = data[i].Name;
jsonObj.push(item);
});
jsonString = JSON.stringify(jsonObj);
//regex : Json remove quotes
jsonString = jsonString.replace(/"(\w+)"\s*:/g, '$1:');
//alert(jsonString);
});
});
var ganttModel = kendo.observable({
cancel: function () {
this.cancelDialog();
},
isVisible: true,
ganttDS: new kendo.data.GanttDataSource({
data: jsonString,
schema: {
model: {
id: "id",
fields: {
Id: { from: "ID", type: "number" },
start: { from: "BriefingStart", type: "date"},
end: { from: "BriefingEnd", type: "date" },
title: { from: "BriefingChannelDescription", type: "string" },
PercentageComplete: {from:"PercentageComplete", type: "number"}
}
}
}
})
});
How do I activate the toolbar export to PDF in my template ? my try did not work
data-toolbar="[""pdf""]"
data-pdfExport="true"
<script id="ganttChartTemplate" type="text/x-kendo-template">
<div id="ganttchart">
<div class="modal-body">
<div class="row">
<div class="form-group">
<div data-role="gantt"
data-columns="[
{ field: 'title', title: 'Gattung', width: 100 },
{ field: 'start', title: 'Start Time', format: '{0:dd/MM/yyyy}', width: 100 },
{ field: 'end', title: 'End Time', format: '{0:dd/MM/yyyy}', width: 100 }
]"
data-views="[ 'day', { type: 'week', selected: true }, 'month' , 'year']"
data-show-work-hours="true"
data-show-work-days="true"
data-height="300"
data-editable="false"
data-listWidth="600"
data-toolbar="[""pdf""]"
data-pdfExport="true"
data-bind="source: ganttDS"></div>
</div>
</div>
<div class="k-dialog-buttons modal-footer">
<button class="k-button k-primary" data-bind="events: { click: cancel }">#= Resources.OF360.SendToBuyingDialogCancel#</button>
</div>
</div>
</div>
</script>
I appreciate your help here.
unfortunately jsonObj did not work, I even tried with ganttDS.read() to assert it again. nothing worked.
I solved this by using parse
parse: function (response) {
$.each(response, function (idx, elem) {
var state = elem.BriefingState;
elem.BriefingState = state/11;
});
return response;
}
data-toolbar="['pdf']" still did not work, I also tried it as a array of string with flower brackets.
I solved it by calling the function itself in my model
savePdf : function(){
var gantt = $("#gantt").data("kendoGantt");
gantt.saveAsPDF();
},

ckeditor plugin dialog select get the description from the selected one

Im am developing a placeholder plugin to CKEDITOR and it´s basically complete. The problem I have is that I am trying to get the value and description from the select within the dialog and I am only getting the value.
The array that contains the description and value looks like this
-->
items: [['description1', 'value1'], ['description2', 'value2']] <--
In the return -> contents -> elements with ID dropdown I have setup and commit function. In these functions I need to get the description just like getting the name from select option.
Really need help with this one, thanks in advance
example -->
<select>
<option value="value1">description1</option>
<option value="value2">description2</option>
</select>
example <--
(function () {
function placeholderDialog(editor, isEdit) {
var lang = editor.lang.phlink,
generalLabel = editor.lang.common.generalTab;
return {
title: lang.title,
minWidth: 300,
minHeight: 80,
contents: [
{
id: 'info',
label: generalLabel,
title: generalLabel,
elements: [
{
id: 'dropdown'
, type: 'select'
, label: lang.chooseVal
, 'default': 'Detta är default'
, items: [['description1', 'value1'], ['description2', 'value2']]
, setup: function (data) {
// need the description
this.setValue(data.title);
}
, commit: function (data) {
// need the description
data.title = this.getValue();
}
},
{
id: 'text',
type: 'text',
style: 'width: 100%;',
label: lang.text,
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.notEmpty(lang.textMissing),
setup: function (data) {
this.setValue(data.text);
},
commit: function (data) {
data.text = this.getValue();
}
}
]
}
],
onShow: function () {
var data = { tag: 'link', content: "detta är innehåll", title: "Länk till svar", text: "detta är text" };
if (isEdit) {
this._element = CKEDITOR.plugins.phlink.getSelectedPlaceHolder(editor);
data.title = this._element.getAttribute('title');
data.text = this._element.getText();
data.tag = this._element.getAttribute('data-jztag');
}
this.setupContent(data);
},
onOk: function () {
var data = { tag: 'link', content: null, title: null, text: null };
this.commitContent(data);
CKEDITOR.plugins.phlink.createPlaceholder(editor, this._element, data);
delete this._element;
}
};
}
CKEDITOR.dialog.add('createplaceholder', function (editor) {
return placeholderDialog(editor);
});
CKEDITOR.dialog.add('editplaceholder', function (editor) {
return placeholderDialog(editor, 1);
});
})();
Use the following to get option's text:
var input = this.getInputElement().$;
console.log( input.options[ input.selectedIndex ].text );
>> "description1"

Categories