Refresh a tab item after change data

Yii 2.0 General Discussions
1

Hello everybody,

z have the following challenge:

I have a view with a tab widget which shows me various tabs and fills them with content.

One of these tabs shows me a list of contacts. I have now written a function that opens a modal after clicking on the contact person to edit the contact details. I use an ActiveForm for this. That works so far.

After changing the contact person, I would now like to reload the tab with the contact persons so that the changed data is also displayed.

I tried my hand at Pjax, but I can’t find the way how to use Pjax correctly in the place.

My code from the tab in the view:

<div id="p0" data-pjax-container="" data-pjax-timeout="false" class="customer-details-view">
   ... here is the contact list ...
</div>

On my modal content with the ActiveForm:

<?php $form = ActiveForm::begin(['options' => ['data-pjax' => 'p0' ],'action' =>['/customer/chgptacontact?id='.$model->id],'id' => 'ptacontactdata']); ?>

Maybe someone has a tip for me? That would be very helpful there. Maybe this is with YII but also not as I imagine.

Thanks a lot for your input.

2

I detest Pjax as I think adds unnecessary complexities.
I would render the page using Ajax (by listening to document ready event)
Then after changes rerender using same javascript function

3

Hello evstevemd,

thank you for your answer. I have now found a solution. In the view for my modal i called:

<?php Pjax::begin(['id' => 'new-contact', 'timeout' => false, 'enablePushState' => false]);?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ],'action' =>['/customer/chgptacontact?id='.$model->id],'id' => 'ptacontactdata']); ?>

And in the javascript function who call the modal view, i have add the following code:

            $("#new-contact").on("pjax:end", function() {
                $('#modal').modal('toggle');
                loadptacontacts(response['customer']);
            });

So the modal will be closed and the function loadptacontacts refresh the content in the tab.

It does what I want. I don’t think it’s the prettiest solution, but it works.

1 Like