Yii2 - Bulk checkbox by GET request - checkbox

I have a checkbox in a gridview Yii2 like this,
[
'class' => 'kartik\grid\CheckboxColumn',
'width' => '20px',
'checkboxOptions' => function ($model, $key, $index, $column) {
return [
'value' => trim($model->vessel),
];
}
],
Then to get all the value checkbox in yii2, I use this button
Html::a('<i class="glyphicon glyphicon-print"></i> Print All',
["print-all-based-date"],
[
"class" => "btn btn-success",
'role' => 'modal-remote-bulk',
])
But when in my controller that handle the the action,
public function actionPrintAllBasedTanggal()
{
$request = Yii::$app->request;
$get = $request->get();
print_r($get);
die();
I get :
Array
(
[r] => iwwi/incoming/print-all-based-tanggal
[KMTC_HOCHIMINH,OOCL_NAGOYA] =>
[_] => 1495123320863
)
What it means [KMTC_HOCHIMINH,OOCL_NAGOYA] =>,
I check in html, the checkbox is named selection[] ?
I need this : KMTC_HOCHIMINH,OOCL_NAGOYA
to get continue my app.
Please advise.
Thanks

may be you can use jquery for the solution.
example :
$(document).on('click','#ceklist_all',function(){
if ($(this).is(':checked')) {
$('.ceklist_child').attr('checked',true);
your_variable = [];
$('.ceklist_child:checked').map(function(key,val) {
if(this.checked) {
your_variable[key] = this.value;
}
}).get();
}
});
so,. you can use the your_variable and use the ajax for submit..
$.ajax({
type: 'get',
url: your_url,
data: {
'your_variabel_to_post' : your_variable
},
success: function(data){
// success function
},
error: function(data){
if(data.responseText)
alert(data.responseText);
},
});
CMIIW,.
just the optional solution. heheh

Related

when i push select2OptionData object in an array, select2 don't display any value

select2 in my angular project. I want to display a select of an array of certificate requested from an api. For each element if I create and push a select2OptionData Object in an array, but when i want to display it in the Html page it is selected but without any option. When i create an array of object like the gitHub demo everything's right.
Can you help me please.
Here is the ts
export class DashboardCvComponent implements OnInit, OnDestroy {
certificateForm: FormGroup;
certificates: Array<Certificate>;
certificatesTypes: Array<Select2OptionData>;
exampleData: Array<Select2OptionData>;
constructor(private formBuilder: FormBuilder, private certificatesService: CertificatesService,
private trainingsService: TrainingsService, private authService: AuthenticationService,
private datepipe: DateFormatPipe, private CvService: CVService, private fileUploaService: FileUploadService) {
this.certificatesTypes = [];
this.exampleData = [];
}
ngOnInit() {
// get certificate types
this.certificatesService.getAllCertificatesType('50').subscribe(
(response) => {
// console.log('-> CERTIFICATES TYPES LOADING successful : ', response);
/* this.certificatesTypes = response.data; */
response.data.forEach(element => {
const certif = {id: element.id.toString(), text: element.name};
this.certificatesTypes.push(certif);
});
this.exampleData = [{
id: 'basic1',
text: 'Basic 1'
},
{
id: 'basic2',
disabled: true,
text: 'Basic 2'
},
{
id: 'basic3',
text: 'Basic 3'
},
{
id: 'basic4',
text: 'Basic 4'
}]
console.log('les certif', this.exampleData, this.certificatesTypes);
},
(error) => {
console.log('-> CERTIFICATES TYPES LOADING failed : ', error);
},
() => {
}
);
and the html
<div class="dashboard--degrees">
<app-certificate *ngFor="let certificate of certificates" [certificate]=certificate [url]=url></app-certificate>
<button class="button button--bluegreen" type="button" data-modal="modal-certificate">
<svg class="icon icon-plus-o">
<use xlink:href="#icon-plus-o"></use>
</svg> <span i18n="##cvcomponent-addcertificate">J'ajoute un diplĂ´me </span>
</button>
<select2 [data]="certificatesTypes"></select2>
<select2 [data]="exampleData"></select2>
</div>
Here the exampleData select display well but not the certificatesTypes
Don't use this.certificate.push inside for loop. it will not work. instead of you can use something like :
let arrCertificates = [];
response.data.forEach(element => {
const certif = {id: element.id.toString(), text: element.name};
arrCertificates.push(certif);
});
this.certificatesTypes = arrCertificates;

How to get checkbox checked from database array using Laravel and Ajax

I'm trying to get data from database to checkboxes as checked. The checkbox data in database are as array that have been inserted with json and they are dynamic data based on insert function.
My tasks table:
id |employee_id | startDate | endDate | ...
---|------------|------------|-----------|--------
1 |["1","2"] | .......... | ..........| ....
My TasksController.php
function fetchdata(Request $request)
{
$id = $request->input('id');
$task = Task::find($id);
$output = array(
'employee_id' => $task->employee_id,
'name' => $task->name,
'description' => $task->description,
'startDate' => $task->startDate,
'endDate' => $task->endDate,
'percentage' => $task->percentage
);
echo json_encode($output);
}
public function getEmployeesList()
{
$employeesList = Employee::all();
return view('adminlte::tasks', ['employeesList' => $employeesList]);
}
My tasks.blade.php
#foreach($employeesList as $emplist)
<label class="checkbox-inline">
<input type="checkbox" id="employee_id" name="employee_id[]" class="chck" value="{{$emplist->id}}" >{{ $emplist->name }}</label>
#endforeach
My Ajax function inside blade:
$(document).on('click', '.edit', function(){
var id = $(this).attr("id");
$('#form_output').html('');
$.ajax({
url: "{{route('tasks.fetchdata')}}",
method: 'get',
data: {id:id},
dataType: 'json',
success:function(data)
{
$('#id').val(data.id);
$('#employee_id').val(data.employee_id);
$('#name').val(data.name);
.......................
..................
}
})
});
So, how can I retrieve data from database to checkboxes as checked, because for now I'm getting null "employee_id" value when I try to update a record.
Thank you in advance
Since you're encoding the data on the server side, you must decode it in the client side like :
...
success:function(data)
{
console.log( data );
data = JSON.parse(data);
$('#id').val(data.id);
$('#employee_id').val(data.employee_id);
$('#name').val(data.name);
...
}

Dynamically setting the options for an ActionSheet in Ionic 2

I am making a GET request to get back some JSON containing an array of options. Within each element I have an id, style and a name.
Based on the response I would like to dynamically set the options of my ActionSheet in my Ionic 2 app.
This ActionSheet works fine. My challenge is setting the options dynamically based on the API response.
let actionSheet = this.actionSheetCtrl.create({
title: 'Change the tag of this visitor',
buttons: [
{
text: 'Destructive red',
cssClass: 'label-red',
handler: () => {
myFunction(1);
}
},
{
text: 'Archive blue',
cssClass: 'label-dark-blue',
handler: () => {
myFunction(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
I would like the keep the cancel option but show my own options above -- i.e. remove the destructive and archive options.
In PHP I would achieve this with this pseudo code ..
$options = array();
$options['title'] = 'Change the tag of this visitor';
$buttons = array();
foreach($api_response as $a) {
array_push($buttons, array('text' => $a['name'], 'cssClass' => $a['style']) );
}
$options['buttons'] = $buttons;
let actionSheet = this.actionSheetCtrl.create(json_encode($options));
And then my final question is how I can specify the appropriate value of id from the elements that I am looping through as the parameter for the myFunction() call ... e.g set the value of XX to be 1 when id=1, 20 when id=20, etc
e.g.
text: 'Name goes here',
cssClass: 'label-red',
handler: () => {
myFunction(XX);
}
I seem to have found a better way to solve this problem. I am using the addButton method ..
let actionSheet = this.actionSheetCtrl.create({
title: 'Change the tag of this visitor'
});
this.http.get('http://api.domain.com/tags', {headers:headers}).map(res => res.json()).subscribe(data => {
for (var i = 0; i < data.res.length; i++) {
actionSheet.addButton({text: data.res[i].name, cssClass: data.res[i].style });
}
});
actionSheet.addButton({text: 'Cancel', 'role': 'cancel' });
actionSheet.present();

Cannot find method on button click event in ag-grid with Angular2

I want to call editAsset() method on button's click event in ag-grid.
ListComponent :
ngOnInit() {
this.route.data.forEach((data: { assets: Asset[]}) => {
this.gridOptions.columnDefs = this.createColumnDefs(data.assets[0]);
this.gridOptions.rowData = data.assets
});
}
private createColumnDefs(asset) {
let keyNames = Object.keys(asset);
let headers = []
keyNames.filter(key => key != '__v' && key != '_id').map(key => {
headers.push({
headerName: key,
field: key,
width: 100
})
});
headers.push({
headerName: 'update',
field: 'update',
cellRendererFramework: {
template: '<button (click) = "editAsset()"> Edit </button>'
},
width: 100
});
return headers;
}
editAsset(): void {
alert("here");
}
Both of these are defined in the same component.
But it can't find the method and showing the following error :
Here's the Snapshot of error report
Here's the grid

Ext js combo box typehead crtl + v error

I have combo box and type head true. On change event I am making ajax request to get matched result.
If type there then its working fine, But If I do copy paste in the Combo then it shows result but gives and error and blocks further flow.
below is the code.
{
xtype : 'combo',
emptyText : 'Search',
id : 'search',
store : Store,
width : '50%',
minChars : 3,
typeAhead : true,
anchor : '100%',
listConfig : {
emptyText : 'No Matching results found.',
getInnerTpl: function() {
return '<div class="search">' +
'<span>{value} - {key}</span>'+
'</div>';
}
},
listeners : {
beforequery: function (record) {
// Added Condition to avoid weird JS error
if(Ext.getCmp('search').getValue() != null && Ext.getCmp('search').getValue().length <= 4){
return false;
}
},
select : function(combo, selection){
var selectedVal = selection[0].data.value;
Ext.getCmp('search').setValue( selectedVal );
},
change : function () {
if( Ext.getCmp('search').getValue() != null && Ext.getCmp('search').getValue().length > 4 ){
var searchEle = Ext.getCmp('search');
var searchType = Ext.getCmp('searchBy').getValue();
var searchText = '%';
searchText += searchEle.getValue();
Ext.Ajax.request({
loadMask : true,
url : URL,
method : 'GET',
params : {
searchText : searchText,
searchType : searchType,
},
scope : this,
success : function( response, callOptions ) {
var myTempData = Ext.decode( response.responseText );
Store.setProxy({
type : 'memory',
data : myTempData,
reader : {
type : 'json',
root : 'data',
totalProperty : 'total',
successProperty : 'success'
}
});
Store.load({
scope : this,
callback : function(records, operation, success) {
}
});
},
failure : function(response, options ) {
loadmask.hide();
Ext.Msg.alert( 'Error', genericErrorMsg );
}
});
}
}
}
The error is as below
The help is greatly appreciated. Thanks.
Json response
{"value":"Test , user # IB Tech: Strategic Change","key":"45804183"},
Finally I solved it.
There was some problem with store.
I bind it after ajax success and removed it from initial config and it got solved.
Store.load({
scope : this,
callback : function(records, operation, success) { }
});
Ext.getCmp('search').bindStore(Store);

Resources