Today I work on the Yii2 application for one of my clients. As the request, I need to add the charts with the criteria or filters form. I also want to add the Pjax to the form and reports so that the whole page won’t need to reload after submitting the form. As normal, I will share what I did in this post. Stay tuned!
What we will do
In the end, we will be able to change the parameters from the criteria or filter form for the report. Once we click on the submit form, the report will be generated using the parameters from the form. We can change the parameters as much as we want, and the report will be regenerated without reloading the whole page. Below is a sample.
Views
What we are doing here, we want to create the report in which the file will be stored in the views folder. Don’t forget to create the route for the report as well. To create the route, simply go to the controllers and add the action for this report. If you are new to Yii2, check out this DOC.
Let’s create the view file.
- At our Yii2 application, navigate to your views folder. Then create your new report PHP file.
- Now add the code below to the report file
<?php
use app\widgets\IncomeExpenseComparisonWidget; // my chart widget
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;
?>
<?php
Pjax::begin([
// Assign the unique ID for Pjax to avoid conflict with other Pjax If I add more Pjax in this file in the future.
'id' => 'pjax-inc-exp-compare',
]);
// Getting the GET request from the submitting form
$getRequest['range_year'] = 3; // default range_year value
if (Yii::$app->request->get()) {
$getRequest = Yii::$app->request->get();
// debug:
// var_dump($getRequest);
}
// Rendering a crtieria form
$form = ActiveForm::begin([
'method' => 'get',
'action' => '/transaction/incomeexpensechart',
'options' => [
'class' => 'form-inline',
'data-pjax' => 1], // enable the Pjax widget for this form
]) ?>
<!-- Input field -->
<div class="form-group">
<label for="range_year"><?= Yii::t('frontend','Choose the range year:') ?></label>
<input type="number" name="range_year" class="form-control" min="1" max="20" placeholder= <?= Yii::t('frontend','Please add the range year for the chart') ?> value=<?= $getRequest['range_year'] ?> >
</div>
<!-- Submit button -->
<div class="form-group">
<?= Html::submitButton( Yii::t('frontend','Render chart') , ['class' => 'btn btn-flat bg-navy']) ?>
</div>
<?php ActiveForm::end() ?>
<!-- Rendering the widget -->
<?= IncomeExpenseComparisonWidget::widget(['range_year' => intval($getRequest['range_year']) ]) ?>
<?php Pjax::end(); ?>
Code Explanation
- In the first section, we add the widgets and helpers that we will use in the report. The “app\widgets\IncomeExpenseComparisonWidget” is my own widget that will render the report(in this case, the report is the chart). You can create your own widget following “How to create your own widget in Yii2“.
- In the second section, we add the Pjax begin() and end() scope. So everything inside the Pjax scope will handle by AJAX request.
- I add the unique ID for the Pjax scope. It is optional. By default, Yii2 will generate a random Pjax ID for you.
- I set the default parameters form. The parameters will pass through my widget. In this sample, the parameter has only one and it is “range_year”.
- Then I check the GET request (Yii::$app>request->get()). The GET request will have the “range_year” value if we submit the form. The reason we can grab the GET request is that the form is inside the Pjax scope.
- Next, we add the criteria or filter form using the ActiiveForm widget. For the form, we set the method attribute as “get”. We also set the action attribute as the same as the report action because after submitting the form, we want the form to redirect back to the same report action. Lastly, we will enable Pjax in the form by adding the “data-pjax” setting in the options attribute.
- After that, we will add the input field and submit button.
- After the form, we will add the report. In this post, we add the custom chart widget named “IncomeExpenseComparisonWidget“.
That’s it for the code. You can debug the AJAX request using the inspection tool from the browser. For example, for Chrome, you can open the inspection tool(F12) and then check the requests at the Network tab. Or you can enable the debug tool from Yii2 and check the request from the debug tool.
Wrap up
Using the criteria or filter form with Pjax in Yii2 is simple. You can add more reports with their own criteria form in the same view file. Yii2 debug tool or the browser inspection tool can help to investigate the AJAX request if something goes wrong from the form. That’s it for today. If my post is helpful and saves your time, please consider buying me a coffee. It will make me smile.
