Develop Reference

Yii2 get value from Gridview button using javascript

I am new to Yii2 Framework , I have developed a module that will upload and display file uploaded from server using Yii2 advance framework. I completed the function for uploading the file , However. In my other function that need to display the file like pdf file to jquery ui dialog.My problem is I cannot get the value of the button when I click the button to display the pdf file uploaded. Thank you guys in advanced.
// Here is Gridview code in Index where my button Exist.
<?= DynaGrid::widget([
'columns' => [
['class' => 'yii\grid\SerialColumn'],
// 'ntraining_id',
'ctraining_description',
//'dtraining_datefrom',
[
'attribute'=>'dtraining_datefrom',
'filterType'=>GridView::FILTER_DATE,
'format'=>'raw',
'filterWidgetOptions'=>[
'pluginOptions'=>['format'=>'yyyy-mm-dd']
],
],
// 'dtraining_dateto',
[
'attribute'=>'dtraining_dateto',
'filterType'=>GridView::FILTER_DATE,
'format'=>'raw',
'filterWidgetOptions'=>[
'pluginOptions'=>['format'=>'yyyy-mm-dd']
],
],
'ctraining_numberhours',
'ctraining_type',
'ctraining_conducted',
//'ctraining_attachment',
[
'attribute'=>'ctraining_attachment',
'format' => 'raw',
'label' => 'View Profile',
'value' => function ($model){
return Html::a(Yii::t('app', ' {modelClass}', [
'modelClass' => $model->ntraining_id,
'header' => 'raw',
]), ['TblTrainingController/Listeaffecter'], ['class' => 'btn btn-success opener', 'id'=>'opener', 'data' => $model->ntraining_id,]);
},
],
//'id',
['class' => 'yii\grid\ActionColumn'],
],
'storage'=>DynaGrid::TYPE_COOKIE,
'theme'=>'panel-info',
'gridOptions'=>[
'dataProvider' => $dataProvider,
'id' => 'grid',
'filterModel' => $searchModel,
'panel'=>['heading'=>'<h3 class="panel-title">LEARNING AND DEVELOPMENT (L&D) INTERVENTIONS/TRAINING PROGRAMS ATTENDED</h3>'],
],
'options'=>['id'=>'dynagrid-1'], // a unique identifier is important
]); ?>
Here is javascript Code
$this->registerJs("$(function(){
$('.opener').click(function(e) {
alert(e.data);
//alert($(this).val());
e.preventDefault();
ViewPDfAttach();
});
});");
Here is the image of my interface that display null when I click the button from gridview

Call to alert(e.data); means you want to get the value of variable e from function callback.
While calling alert($(this).val()); means you want to get the value from value attribute in the element, but there's no value attribute found in yours.
Based on your element structure, if you want to get the value from data attribute, you can do this:
alert($(this).attr('data'));
If your element has structure like <a data-hello="Hello there">Click me</a>, you can alert with this one:
alert($(this).data('hello'));
See here for more informations:
JQuery .data()
JQuery .attr()

Prevent execute previous modal after click next modal

I have one modal in one form and two different button to call this modal.
This are my two buttons
<?= Html::button('Search Ticket', [
'value' => Yii::$app->urlManager->createUrl('/ticket-timbangan/list'),
'class' => 'btn btn-primary showModal',
'id' => 'BtnModalTicketList',
'title' => 'List Ticket Timbangan',
]) ?>
<?= Html::button('Search Contract', [
'value' => Yii::$app->urlManager->createUrl('/contract/list'),
'class' => 'btn btn-primary showModal',
'id' => 'BtnModalContractList',
'title' => 'List Contract',
]) ?>
Modal will show list of tickets or contracts to be selected by user to fill new data (as reference) and the return is Json::encode.
my modal code:
Modal::begin([
'headerOptions' => ['id' => 'modalHeader'],
'id' => 'modal',
'size' => 'modal-lg',
'closeButton' => [
'id'=>'close-button',
'class'=>'close',
'data-dismiss' =>'modal',
],
'class' => 'style=width:auto',
'clientOptions' => [
'backdrop' => false, 'keyboard' => true
]
]);
echo "<div id='modalContent'></div>";
Modal::end();
and in the script for showing up the modal
$(document).on('click', '.showModal', function(){
if ($('#modal').hasClass('in')) {
$('#modal').find('#modalContent')
.load($(this).attr('value'));
document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
} else {
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
}
});
script in the action list would be like this after user click selected row
$(document).on('click', '.select-row', function(){
// get id from custom button
var id = $(this).attr('data-id');
$.get('../ticket-timbangan/get-ticket', {id : id}, function(data){
var data = $.parseJSON(data);
$('#pengirimanproduksi-ticket_id').val(data.id);
$('#pengirimanproduksi-vehicle_id').val(data.vehicle_id).trigger('change');
$('#pengirimanproduksi-item_id').val(data.item_id).trigger('change');
$('#pengirimanproduksi-bruto_tbg').val(data.bruto);
$('#pengirimanproduksi-tara_tbg').val(data.tara);
$('#pengirimanproduksi-remark').val(data.remark);
});
$('#modal').modal('hide');
});
the issue is when user click first button let's say ticket button to show up modal contains list of tickets to be selected. after click select, it was OK. but if user click second button let's say contract button to show up modal contains list of contracts to be selected and select one data. after event close the modal, it would execute script from first modal (which is ticket).
how to prevent this?
Thanks in advance

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']); ?>

Yii2 Tabs widget not changing state after setting to active

I have made two buttons for switching views on 2 tabs. Every button corresponds to different tab and contents under the Tabs::widget is properly updated but the highlighted tab is not changing unlike when the tab is pressed. What else am I missing?
<?php
use yii\helpers\Html;
use yii\bootstrap\Tabs;
?>
<?=
Html::button("1", [
'class' => 'btn btn-info',
'id' => 'criticalTab',
'style' => 'position:relative; left:20px; background-color:red;',
] )
?>
<?=
Html::button("2", [
'class' => 'btn btn-info',
'id' => 'warningTab',
'style' => 'position:relative; left:30px; background-color:orange;',
] )
?>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#criticalTab").click(function(){
$("#tab1").addClass('active');
$("#tab2").removeClass('active');
});
$("#warningTab").click(function(){
$("#tab1").removeClass('active');
$("#tab2").addClass('active');
});
});
</script>
<div style="position:relative; left:0px; top:30px">
<?=
Tabs::widget([
'items' => [
[
'label' => 'Critical',
'options' => ['id' => 'tab1'],
'content' => 'hello'
],
[
'label' => 'Warning',
'options' => ['id' => 'tab2'],
'content' => 'hi'
],
],
]);
?>
</div>

When you click on 1 or 2 button , they don't fire the click event of tabs. Change your script code to below one.
<script type="text/javascript">
jQuery(document).ready(function () {
$("#criticalTab").click(function(){
$('.nav-tabs').find('a[href="#tab1"]').trigger('click');
});
$("#warningTab").click(function(){
$('.nav-tabs').find('a[href="#tab2"]').trigger('click');
});
});
</script>
You have to bind the click event of tabs with required buttons.

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.