Develop Reference

yii2 kartik switch input type radio button get value in javascript

I use the yii2 kartik switch input with the type radio and i want to get the value of the selected option in javascript (specially in a JsExpression), here is my code :
$model->orientation = 'Portrait';
echo $form->field($model, 'orientation')->widget(SwitchInput::classname(), [
'name' => 'information_orientation',
'type' => SwitchInput::RADIO,
'value' => 'Portrait',
'items' => [
['label' => 'Portrait&nbsp&nbsp&nbsp', 'value' => 'Portrait'],
['label' => 'Paysage&nbsp&nbsp&nbsp', 'value' => 'Paysage'],
],
'pluginOptions' => [
'onText' => 'Oui',
'offText' => 'Non',
'onColor' => 'success',
'offColor' => 'danger',
'size' => 'mini'
],
'labelOptions' => ['style' => 'font-size: 13px'],
]);
I have tried :
$([name='information-orientation']).val()
But it returned an undifined value

SwitchInput class does not care about the name property you give it
according to their docs, you need to wrap name in a options array
echo $form->field($model, 'orientation')
->widget(SwitchInput::classname(), [
'options' => ['name' => 'information_orientation'],
'type' => SwitchInput::RADIO,
....
from docs:
options: array the HTML attributes for the widget input tag.
edit:
you can then use the following
// to get value:
$("[name='information_orientation']").val()
// to check if the switch is or on off
$("[name='information_orientation']").prop('checked')

Pjax not working, reload the whole page

I'm developing a project using Yii2 and get frustrated with Pjax because it never works for me. Here is a simple gridview with pjax that I have created:
<?php Pjax::begin(['id' => 'member-list-pjax', 'timeout' => 5000]);?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
'member_card_number',
'member_name',
[
'attribute' => 'member_address',
'format' => 'raw',
],
'member_phone1',
'member_phone2',
[
'attribute' => 'member_type',
'value' => function ($model, $key, $index, $column){
return $model->getTypeLabel($model->member_type);
},
'filter' => $searchModel->getTypeLabel(),
],
],
]); ?>
<?php Pjax::end();?>
The Pjax doesn't work at all. When I search something in gridview's filter, it reloads the entire page. There is also no javascript error. Can anybody help me?
UPDATE
My action is actually very long. But here is the part that I think is related to the gridview:
$searchModel = new MemberSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
if (isset($_GET['MemberSearch']))
$searchModel->attributes = $_GET['MemberSearch'];
return $this->render('form', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
UPDATE 2
I use kartik's gridview now, I removed the PJax and put 'pjax' => true in the gridview, it successfully do Ajax Filter, BUT still reload the whole page not long after.
GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'pjax' => true,
'pjaxSettings' => [
'neverTimeout' => true,
],
'columns' => [ /*columns same as above*/ ]
]);

Please check your id and put this javascript in top of the page
$('body').on('click','.reload',function(){
$.pjax.reload({container: '#w0-pjax'});
});
Also use below code
<?php \yii\widgets\Pjax::begin(['linkSelector'=>'','id'=>'w0-pjax']); ?>

How to open a new tab in browser from a ctools modal form in Drupal 7?

I'm creating a module with differents forms. I have some forms which are modal forms using ctools.
On one of these modal forms i made a button to open a pdf on a new tab in my browser but it doesn't work.
I have a AJAX error.
This is my code:
function liste_apprenant_partenaire($js){
if ($js) {
ctools_include('ajax');
ctools_include('modal');
ctools_add_js('ajax-responder');
$form_state = array(
'ajax' => TRUE,
);
$output = ctools_modal_form_wrapper('liste_apprenant_partenaire_form', $form_state);
if (!empty($form_state['ajax_commands'])) {
$output = $form_state['ajax_commands'];
}
print ajax_render($output);
drupal_exit();
}
else {
return drupal_get_form('liste_apprenant_partenaire_form');
}
}
function liste_apprenant_partenaire_form($form, &$form_state){
$form['pv-button'] = array(
'#id' => 'pv-button',
'#type' => 'submit',
'#value' => 'PV',
'#submit'=>array('pv_apprenant_partenaire_button_form_submit'),
'#attributes' => array('onclick' => 'target="_blank";return true;'),
);
return $form;
}
function pv_apprenant_partenaire_button_form_submit(&$form, &$form_state){
require_once("sites/all/modules/print/lib/dompdf/autoload.inc.php");
$node_session=node_load($_SESSION['nid_session']);
$type_formation=$node_session->field_type[LANGUAGE_NONE][0]['value'];
$test=file_get_contents('sites/all/modules/multi_example/test.html');
$test=str_replace('+type_formation',"$type_formation",$test);
$dompdf = new Dompdf();
$dompdf->loadHtml($test);
$dompdf->render();
$dompdf->stream('my.pdf',array('Attachment'=>0));
}
When i put the path of the node in my browser, it's worked fine because the form appears normally not as a modal form.
But i research the same result using a modal form. So i think there is a problem with AJAX but i don't find the real solution.

do not use button type submit
use form item type link then if you need this link look like button then you can style this as a button
use like this in the form
$form['my_module_custom_link'] = array(
'#type' => 'link',
'#title' => 'PDF',
'#href' => "/my/hello",
'#attributes' => array(
'target' => '_blank',
),
it should display a link inside the form then style it as you need

How to get value of checked gridview column

Hi guys i have a gridview like below
and i want to get the 'user_id' of the checked column
how can i do that???
I could easily get the checked column id but i dont know how to get data of those checked column in gridview
i want to get it via javascript so that i can pass it to service
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showOnEmpty'=>true,
'columns' => [
['class' => 'yii\grid\CheckboxColumn'],
[
'attribute' => 'event_id',
'label' => 'Event Title',
'value' => 'event.title'
],
[
'attribute' => 'user_id',
'label' => 'Email',
'value' => 'users.email',
],
'user_type',
],
]);
?>
and here is my javascript to get ids of checked column
jQuery(document).ready(function() {
btnCheck = $("#send");
btnCheck.click(function() {
var keys = $("#w0").yiiGridView("getSelectedRows");
}
});
Let me tell you the flow of this
On homepage is a gridview like this
Now user will click on that small user sign and that will open the page you can see below
Thats when i want to send messages to all selected users
Because in my case title is from different table and name and email are from different table so i want ids of user table
For that i want user_id but i am getting some random values
What can i do here???
I tried this but its returning some random string
public function search($params)
{
if(!isset($_GET['id'])){
$id='';
}
else{
$id=$_GET['id'];
}
$query = Checkin::find()->where(['event_id'=> $id]);
$query->joinWith(['event', 'users']);
$dataProvider = new ActiveDataProvider([
'query' => $query,
]);
$this->load($params);
if (!$this->validate()) {
return $dataProvider;
}
$query->andFilterWhere([
'id' => $this->id,
'created_date' => $this->created_date,
'created_by' => $this->created_by,
'updated_date' => $this->updated_date,
'updated_by' => $this->updated_by,
]);
$query->andFilterWhere(['like', 'user.email', $this->user_id]);
$query->andFilterWhere(['like', 'user_type', $this->user_type]);
$dataProvider->keys ='user_id';
return $dataProvider;
}

Update your DataProvider set $dataProvider->keys ='userId' then you will able to get all keys of user_id
data-id of GridView and get allSelectedColumns

You need to just replace this code
['class' => 'yii\grid\CheckboxColumn'],
with below code
[
'class' => 'yii\grid\CheckboxColumn',
'checkboxOptions' => function($data) {
return ['value' => $data->user_id];
},
],

Yii2 Checkbox Changes Style

I have a GridView displaying employee payslips, and beside each of their names are check boxes. Refer to the picture below:
As you can see, I also have a drop-down list. I set it in my jQuery to select the last child of the list which is my case, the April 10, 2015 - April 16, 2015 option. On page load, I can see this page (photo above) with those check boxes. I had a problem with the check boxes since when I click the header check box, it should select all of the check boxes below it. But it's not. Now, when I tried selecting another option in the drop-down list, here's what I get:
The style of the check boxes changes. And now, when I check the header check box, it's already working, selecting every check boxes below.
Here's how I display the drop-down list:
echo Select2::widget([
'name' => 'period',
'data' => $period,
'options' => [
'placeholder' => 'Select period',
'id' => 'period',
'style' => 'width: 400px; height: 34px;'
],
'pluginOptions' => [
'maximumInputLength' => 10,
],
]);
GridView:
<?php \yii\widgets\Pjax::begin(['id' => 'employee']); ?>
<?php
echo GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
['class' => 'yii\grid\CheckboxColumn',
'options' => ['class' => 'icheckbox_minimal',]
],
'fname',
'lname',
'totalEarnings',
'totalDeductions',
'netPay',
[
'label' => 'Action',
'content' => function ($model, $key, $index, $column) {
if ($model->netPay != null) {
return Html::a('View Payslip', ['view' , 'id' => $model->payslipID], ['class' => 'btn btn-success']);
}else{
return Html::a('Create Payslip', ['create-new', 'id' => $model->user_id], ['class' => 'btn btn-warning']);
}
}
]
],
]);
?>
<?php \yii\widgets\Pjax::end(); ?>
Script:
<script>
$(document).ready(function(){
$("#period option:last-child").attr('selected', 'selected');
$("#period").change( function()
{
var period = $('#period').val();
if(period != 0){
$.ajax({
url: 'index.php?r=payslip/periods',
dataType: 'json',
method: 'GET',
data: {id: period},
success: function (data, textStatus, jqXHR) {
$.pjax.reload({container:'#employee'});
//alert(data.start);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('An error occured!');
alert('Error in ajax request');
}
});
}
}
);
})
</script>
My question is, how do I preserve/maintain the style of the check boxes? And why does it change in style? And why are the styled check boxes not working?

Your checkboxes are changed with javascript to look like that.
You have 2 problems:
1) your "check all" function works just fine, you just need to refresh the status of the checkboxes afterwards. It works like this: when you click on the div that replaces the checkbox then the checkbox gets changed under it. Your problem is that you check it with the scripts so you need to trigger the div that sits on top of it to change too.
2) because you use pjax your page DOM gets changed. However because you probably change the checkboxes on "onload" of the page the new checkboxes remain unstyled. You need to run the function that changes them again after the pjax call.