How to reload a div with a widget inside by button click? - yii2

My controller
public function actionIndex()
{
return $this->render('index');
}
In the view I call a series of widgets. All the logic inside the widgets, they do not have any input parameters. In each block for every widget I want to add a button to update the widget inside this block.
<?= Html::a("Обновить", ['???'], ['class' => 'btn btn-sm btn-default', 'data-pjax' => '#formsection']) ?>
I put widget in pjax
<?php Pjax::begin(['id' => 'formsection', 'linkSelector' => '#chart a']); ?>
<div class="chart" id="chart" style="height: 200px; position: relative;">
<?= Chart::widget(); ?>
</div>
<?php Pjax::end(); ?>
How to assign a specific block to a button?

As i understand the chart is drawn via some values from the database which are frequently updated and you want those changes to be reflected in the chart when you click the reload button.
If the above is correct then you should use $.pjax.reload simply to reload the section bind the click event to the button
$this->registerJs('
jQuery(document).on("click", "#my-button", function(event){
$.pjax.reload({container:"#formsection",timeout:1000})
}
);
');
Hope that helps.

Related

Split pjax wiget in form part and result part

I'm using Yii2, activeForm and the Yii2 pjax widget to handle an search form with result list.
But for layout reason, I have to split this package to two parts: the search form, which should be located in the header of the page and the result listing, which should be placed in the middle of the page.
This means it's not possible to do something like that (pseudocode):
Pjax::begin
$form=>activeForm::begin..
ActiveForm::end();
ListView::widget...
Pjax::end()
What I need is placing the activeForm in the layout header, placing the ListView wiget in the center of the page and telling pjax: read the input from the form, load data from Server and replace the clist view.
Is that possible using the build-in functionality of the widgets?
I didn't get it working, maybe I misunderstood the basic concept?
Using gridview (or widget which use searchModel) you could use a separated model for modelSearch in header and show the resul in the gridview palced where you prefer
in this way you need only a pjax block
<?= $this->render('_search', ['model' => $searchModel]); ?>
<?php Pjax::begin(); ?>
<?= GridView::widget([
...
]); ?>
<?php Pjax::end(); ?>
for other soluzione not based on gridview and when you need multiple seprataed pjax block
You could try using named pjax block using a value for id
<?php \yii\widgets\Pjax::begin(['id'=>'pjax-block1']); ?>
....
....
<?php \yii\widgets\Pjax::end(); ?>
<?php \yii\widgets\Pjax::begin(['id'=>'pjax-block2']); ?>
....
....
<?php \yii\widgets\Pjax::end(); ?>
and if you need you could manage specific refresh using jquery
$.pjax.reload({container: '#pjax-block1', async: false});
$.pjax.reload({container: '#pjax-block2', async: false});

how can I add modal to navbar in yii2?

I'm trying to add a modal to my navbar.
This is my \views\project_form.php:
<?php Modal::begin(['id' => 'modal', ?>
<?= $form->field($model, 'Wert')->textInput(['maxlength' => true]) ?>
<?php Modal::end(); ?>
and this is my Controller:
function actionShowmodal(){
$js='$("#modal").modal("show")';
$this->getView()->registerJs($js);
return $this->render('create');
}
I did this as it was described here how can I add modal to navbar in yii2 using yii2 -bootstrap extension?.
When I use a modal navbar in my index.php it works. But when I use a modal navbar in my form, an error is issued: Undefined variable: model.
How can I fix it?
In order to create a form in modal you need to pass the respective model for the form
function actionShowmodal(){
$model = new RespectiveModel(); //Model For the Form
$js='$("#modal").modal("show")';
$this->getView()->registerJs($js);
return $this->render('create',["model"=>$model]);
}
and in your "create.php" view file where you are rendering the form, pass the model variable again
echo $this->render('project_form',["model"=>$model]);

using pjax for toasts without full refresh

Pjax for Alerts
There is alert.php included in layout file above $content. This is as below :
<?php Pjax::begin(['id'=> 'new-alert','enablePushState' => false]); ?>
<?= \odaialali\yii2toastr\ToastrFlash::widget([
'options' => [
'positionClass' => 'toast-bottom-full-width',
//'progressBar' => true,
'timeOut' => 6000,
'extendedTimeOut' => 2000
]
]);?>
<?php Pjax::end(); ?>
And to get flash messages in ajax , there are calls to below container
$.pjax.reload({container:'#new-alert'});
This results in showing of alert messages but also sends an Ajax request to URL whichever page is open. Can we trigger request to "/site/toast" on ajax calls which can renderAjax the above widget inplace of making ajax request on current url ?
Since there are no html "a" tag well as neither any "form" tag here inside widget generated html, Is this correct use of pjax ?
http://localhost:8081/about-us?_pjax=%23new-alert
Pjax for form
Also if we wrap an Active Form inside Pjax, how can we make sure that none of A tags or nested Form trigger a Pjax request except the container form ?
I have removed call for pjax from PHP and made alert as below -
<div id="new-alert">
<?= \odaialali\yii2toastr\ToastrFlash::widget([
'options' => [
'positionClass' => 'toast-bottom-full-width',
//'progressBar' => true,
'timeOut' => 6000,
'extendedTimeOut' => 2000
]
]); ?>
</div>
Instead I am making pjax call from javascript as below -
$.pjax({url: encodeURI(baseUri + "site/toast"), container: '#new-alert', push: false})
public function actionToast()
{
if(Yii::$app->request->getHeaders()->has('X-PJAX'))
{
return $this->renderAjax('//common/alert');
}
else
{
return $this->redirect(Yii::$app->request->referrer);
}
}
$.pjax.reload was previously retrieving additional toasts if there were some for current url as well. Above solution only gets toasts related to ajax.

How to reference grid to ActiveForm

You have on one page ActiveForm as master record, and grid as child records, how can i make relation between them. At create time there isn't id of master record! Any advice is wellcome! TIA. Asim
There is no need to use modal in order to add the child object. You can do it in one form. If you use a modal, you'll need to create the parent object first, and then allow this modal to be shown. In this way, your worries will be invalid.
If you want to add a parent and a child in one form, you can pass both objects to the view and then put their fields in the form. Then on form submit, you validate both objects, and then if everything is fine, save the parent, and then the child, assigning the parent id to the child. You can do this in a transaction so that if the child fails, the parent won't be recorded as well or vise versa.
Here is some code:
class YourController extends Controller
{
public function actionSomething()
{
$parent = new Parent();
$child = new Child();
$request = Yii::$app->request;
if ($parent->load($request->post('Parent')) && $child->load($request->post('Child'))) {
// Do validation and if everything is fine, then save the fields
Yii::$app->db->transaction(function() {
$parent->save(false);
$child->parent_id = $parent->id;
$child->save(false);
});
}
return $this->render('view', compact('parent', 'child'));
}
}
The view:
$form = ActiveForm::begin() ?>
<?= $form->field($parent, 'fieldA') ?>
<?= $form->field($parent, 'fieldB') ?>
<?= $form->field($child, 'fieldA') ?>
<?= $form->field($child, 'fieldB') ?>
...other input fields...
<?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
Did you get the idea? If you have questions or problems, please ask. Here is another example. This is with an update, but the idea is the same:
Getting Data for Multiple Models

yii2 switch button that render page with pjax

I'm trying to make a form that changes the input according to the button pressed, using pjax of yii2, no page loads.
My view
<div id="container-ajax">
<?php Pjax::begin([]);
echo $this->render('noleggia_andata', ['form' => $form, 'noleggi_partenza' => $noleggi_partenza]);
Pjax::end(); ?>
</div>
This is one, I tried with ActionView from Button but do not know how to do, can you give me any suggestions?
View
<?= Html::a("Go", ['noleggi/noleggia_andata'], ['class' => 'btn-discard-orange']) */ ?>
Controller
public function actionNoleggia_andata()
{
$noleggi_partenza = new Noleggi_partenza;
return $this->render('noleggia_andata',['noleggi_partenza' => $noleggi_partenza]);
}
Controller view rederAjax
public function actionNoleggia_andata()
{
$noleggi_partenza = new Noleggi_partenza;
return $this->renderAjax('noleggia_andata',['noleggi_partenza' => $noleggi_partenza]);
}