We Keep Coding

EditableProTable Edit is Not working in ant design pro

I created table with ant design ProTable Component and its Edit function is not working. It showing error like this. ("Cannot read properties of undefined (reading 'toString')"). I tried many ways to solve this problem and cannot found a solution yet.
I want get table data from CSV file upload. That function is already working and data retrieved to the table.
const columns = [
{
title: 'First Name',
valueType: 'string',
typeof:'string',
dataIndex: 'fName',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Last Name',
valueType: 'string',
typeof:'string',
dataIndex: 'lName',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Email',
valueType: 'string',
typeof:'string',
dataIndex: 'email',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Position',
valueType: 'string',
typeof:'string',
dataIndex: 'position',
formItemProps: () => {
return {
rules: [{ required: true, message: '' }],
};
},
},
{
title: 'Actions',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
<a
key="delete"
onClick={() => {
setData(data.filter((item) => item.id !== record.id));
}}
>
Delete
</a>,
<a
key="editable"
onClick={() => {
var _a;
(_a = action === null || action === void 0 ? void 0 : action.startEditable) === null ||
_a === void 0
? void 0
: _a.call(action, record.id);
}}
>
Edit
</a>,
],
},
];
EditableProTable
rowKey="id"
actionRef={actionRef}
headerTitle=""
maxLength={5}
recordCreatorProps={false}
columns={columns}
request={async () => ({
data: data,
total: 3,
success: true,
})}
value={csvArray}
onChange={setCsvArray}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
await waitTime(2000);
},
onChange: setEditableRowKeys,
actionRender: (row, config, defaultDom) => [
defaultDom.save,
defaultDom.delete || defaultDom.cancel,
],
}}
/>[![enter image description here][1]][1]

The editableKeys array contains rows that are in the editing state
const [editableKeys, setEditableRowKeys] = useState(() => csvArray.map((item) => item.index)); // or .map((item=) => item.key));

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

Function enabled/disabled button save in form not work yii2

I've created form update and using one function for enabled button. But when I implementation is failed. The logic process is when user click button become enabled when user input the all fields in form update is "Ada" and "Lolos" (field wawancara). I don't know why, please advice for me.
This code in view :
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\widgets\Pjax;
use yii\bootstrap\Modal;
use yii\helpers\Url;
use yii\db\ActiveRecord;
use yii\helpers\ArrayHelper;
use app\models\Calon;
use kartik\widgets\Select2;
?>
<h1 align="center">Form Ubah Ketentuan</h2>
<?php
echo "&nbsp";
echo "&nbsp";
?>
<?php $form = ActiveForm::begin([
'layout' => 'horizontal',
'enableAjaxValidation' => false,
'id' => 'update-form',
]);
?>
<?php
$data = ArrayHelper::map(Calon::find()->all(), 'kode_calon', 'nama_calon');
echo $form->field($model, 'kode_calon')->widget(Select2::classname(), [
'data' => $data,
'model' => $model,
'language' => 'id',
'disabled' => true,
'options' => [
'placeholder' => 'Pilih',
'id' => 'kode_calon'],
'pluginOptions' => [
'allowClear' => false,
'width' => '300px',
],
])->label('Calon nama anak asuh');
?>
<?php
echo $form->field($model, 'rapor')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'rapor'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Rapor');
?>
<?php
echo $form->field($model, 'ijazah')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'ijazah'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Ijazah');
?>
<?php
echo $form->field($model, 'surat_kematian_ortu')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_kematian_ortu'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat kematian orang tua');
?>
<?php
echo $form->field($model, 'surat_keterangan_sehat')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_keterangan_sehat'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat keterangan sehat');
?>
<?php
echo $form->field($model, 'akte_kelahiran')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'akte_kelahiran'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Akte kelahiran');
?>
<?php
echo $form->field($model, 'kartu_keluarga')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'kartu_keluarga'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Kartu keluarga');
?>
<?php
echo $form->field($model, 'foto')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'foto'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Foto');
?>
<?php
echo $form->field($model, 'surat_pengantar_rt_rw')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_pengantar_rt_rw'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat pengantar RT RW');
?>
<?php
echo $form->field($model, 'surat_rek_muh')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_rek_muh'],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat rekomendasi Muhammadiyah');
?>
<?php
echo $form->field($model, 'wawancara')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Lolos' => "Lolos", 'Tidak' => "Tidak"],
'language' => 'id',
'options' => [
'placeholder' => 'Pilih',
'id' => 'wawancara',
],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Wawancara');
?>
<?php
echo $form->field($model, 'surat_ketersediaan_anak')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
//'disabled' => true,
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_ketersediaan_anak',
],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat ketersediaan anak');
?>
<?php
echo $form->field($model, 'surat_pernyataan_wali')->widget(Select2::classname(), [
'model' => $model,
'hideSearch' => true,
'data' => ['Ada' => "Ada", 'Tidak' => "Tidak"],
'language' => 'id',
//'disabled' => true,
'options' => [
'placeholder' => 'Pilih',
'id' => 'surat_pernyataan_wali',
],
'pluginOptions' => [
'allowClear' => false,
'width' => '380px',
],
])->label('Surat pernyataan wali');
?>
<?= $form->field($anak_asuh, 'kode_anak_asuh')->hiddenInput(['readOnly' => true, 'style' => 'width:100px'])->label(false); ?>
<?php
$anak_asuh->kode_calon = $model->kode_calon;
?>
<?= $form->field($anak_asuh, 'kode_calon')->hiddenInput(['style' => 'width:100px'], ['disabled' => true])->label(false); ?>
<?= $form->field($anak_asuh, 'status')->hiddenInput(['style' => 'width:380px', 'value'=>'Tetap'], ['disabled' => true])->label(false); ?>
<div class="form-group">
<div class="col-sm-offset-4">
<?= Html::submitButton('Ubah', ['class' => 'btn btn-primary', 'disabled' => 'disabled', 'id' => 'ubah']) ?>
<?php
echo "&nbsp";
echo "&nbsp";
echo Html::a('Keluar', ['index'],[
'class'=>'btn btn-success',
'onclick' =>'$("#ketentuanModal").modal("hide");
return false;'
]);
?>
<?php ActiveForm::end();?>
<?php // This function
$this->registerJs('
$("#rapor, #ijazah, #surat_kematian_ortu, #surat_keterangan_sehat, #akte_kelahiran, #kartu_keluarga, #foto, #surat_pengantar_rt_rw, #surat_rek_muh, #wawancara, #surat_ketersediaan_anak, #surat_pernyataan_wali").on("change",function(){
var isi1 = this.value;
var isi2 = this.value;
var isi3 = this.value;
var isi4 = this.value;
var isi5 = this.value;
var isi6 = this.value;
var isi7 = this.value;
var isi8 = this.value;
var isi9 = this.value;
var isi10 = this.value;
var isi11 = this.value;
var isi12 = this.value;
if(isi1 == "Ada" && isi2 == "Ada" && isi3 == "Ada" && isi4 == "Ada" && isi5 == "Ada" && isi6 == "Ada" && isi7 == "Ada" && isi8 == "Ada" && isi9 == "Ada" && isi10 == "Lolos" && isi11 == "Ada" && isi12 == "Ada") {
$("#ubah").attr("disabled",false);
}
});
')
?>

Data Tables: brake with url

I have a situation with Data Tables that I don't understand:
Problem:
I have this rewriteRule:
Rewriterule ^table/ table.php
So, when I go to www.site.com/table.php all is working good but when I go to www.site.com/table/ I have the next alert message:
DataTables warning: table id={tablet} - Invalid JSON response. For more information about this problem go to: http://datatables.net/tn/1
I went to the suggest url but I can't fix the problem.
Sorry but I can not give the site online because is an intranet.
My php code is this:
$table = 'paciente';
$primaryKey = 'id';
$columns = array(
array(
'db' => 'id',
'dt' => 0),
array(
'db' => 'nombre',
'dt' => 1,
'formatter' => function( $d, $row ) {
$links=''.$row[1].'';
return $links;
}),
array( 'db' => 'apellidos', 'dt' => 2 ),
array( 'db' => 'tel_mov', 'dt' => 3,
'formatter' => function( $d, $row ) {
$tels=$row[3];
return $tels;
}
),
array( 'db' => 'tel_casa', 'dt' => 4,
'formatter' => function( $d, $row ) {
$tels2=$row[4];
return $tels2;
}
),
array( 'db' => 'terapeuta', 'dt' => 5 ),
array(
'db' => 'id',
'dt' => 6,
'formatter' => function( $d, $row ) {
$links2='<img src="ima/edit.png" /> | <img src="ima/close.png" />';
return $links2;
}),
);
require( 'libraries/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
And the javascript:
<script type="text/javascript" src="<?php echo $base; ?>js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tablet').DataTable({
"language": {
"url": "js/Spanish.json"},
"scrollY": "500px",
"scrollCollapse": true,
"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax": "table-load.php",
"order": [[ 1, "asc" ]],
"aoColumns": [
{ "sTitle": "id","bVisible": false},
{ "sTitle": "Nombre" },
{ "sTitle": "Apellidos" },
{ "sTitle": "Móbil","bSortable": false },
{ "sTitle": "Fijo","bSortable": false },
{ "sTitle": "Terapeuta","bSortable": false },
{ "sTitle": "Edición","bSortable": false,"bSearchable": false }],
"fnDrawCallback": function() {
tb_init('a.thickbox');
}
});
} );
</script>
Any idea?? Thanks in advance!!

I had a similar issue. The problem is that Datatable.js needs to read data from a "data" array key (extremely hard information to find in their docs honestly).
This mean that you need to adjust your PHP script to get an array which has this structure:
"success" => true|false // useful to display errors
"message" => string // explains the error (if occurred)
"data" => array // contains all your data
EDIT
This is an example of a PHP array which is ready to be encoded and handled by DataTable.js. Note the array key "data": DataTable.js will search for elements to display in that jsonResponse.data.
<?php
// data fetched from database
$fromDatabase = [
'example',
'test',
'foo',
'bar'
];
$response = [
'success' => true,
'message' => '',
'data' => $fromDatabase
];
echo json_encode($response);
?>

I fix it in the javascript DataTable options with the full url in the ajax call:
"ajax": "<?php echo $base; ?>table-load.php"
So the javascript is something like this:
<script type="text/javascript" src="<?php echo $base; ?>js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tablet').DataTable({
"language": {
"url": "js/Spanish.json"},
"scrollY": "500px",
"scrollCollapse": true,
"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax": "<?php echo $base; ?>table-load.php",
"order": [[ 1, "asc" ]],
"aoColumns": [
{ "sTitle": "id","bVisible": false},
{ "sTitle": "Nombre" },
{ "sTitle": "Apellidos" },
{ "sTitle": "Móbil","bSortable": false },
{ "sTitle": "Fijo","bSortable": false },
{ "sTitle": "Terapeuta","bSortable": false },
{ "sTitle": "Edición","bSortable": false,"bSearchable": false }],
"fnDrawCallback": function() {
tb_init('a.thickbox');
}
});
} );
</script>
And the php:
$table = 'paciente';
$primaryKey = 'id';
$columns = array(
array(
'db' => 'id',
'dt' => 0),
array(
'db' => 'nombre',
'dt' => 1,
'formatter' => function( $d, $row ) {
$links=''.$row[1].'';
return $links;
}),
array( 'db' => 'apellidos', 'dt' => 2 ),
array( 'db' => 'tel_mov', 'dt' => 3,
'formatter' => function( $d, $row ) {
$tels=$row[3];
return $tels;
}
),
array( 'db' => 'tel_casa', 'dt' => 4,
'formatter' => function( $d, $row ) {
$tels2=$row[4];
return $tels2;
}
),
array( 'db' => 'terapeuta', 'dt' => 5 ),
array(
'db' => 'id',
'dt' => 6,
'formatter' => function( $d, $row ) {
$links2='<img src="ima/edit.png" /> | <img src="ima/close.png" />';
return $links2;
}),
);
require( 'libraries/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
Note that I put ../ behind the urls
This worked for me...