Using Pjax in YII2 for updating a div

Question

I'm trying to use Pjax widget in a yii2 project.
My goal is to update the div #formsection with some content.
My code: View

<?php Pjax::begin(); ?>
   <div id="formsection"></div>
   <?php foreach ($tree as $id => $name): ?>
        <?php echo Html::a(
            $name, 
            ['update', 'id'=>$id],
            ['data-pjax'=> '#formsection']) ?>
   <?php endforeach ?>
<?php Pjax::end(); ?>

Update action

public function actionUpdate($id)
{
    return $this->renderAjax('update');
}

When I click the link all of the pjax div contents are replaced by the response from the server. I want just the #formsection content to update.

I found a post here but it doesn't work too.

Some more info: This is the js code that Pjax widget generates in the page.

jQuery(document).ready(function () {
jQuery(document).pjax("#w0 a", "#w0", {"push":true,"replace":false,"timeout":1000,"scrollTo":false});
jQuery(document).on('submit', "#w0 form[data-pjax]", function (event) {jQuery.pjax.submit(event, '#w0', {"push":true,"replace":false,"timeout":1000,"scrollTo":false});});
});

What is the problem with my code?

---

I solved the problem. I had to change the view to this.

<div id="categories">
    <?php foreach ($tree as $id => $name): ?>
        <?php echo Html::a(
                $name, 
                ['update', 'id'=>$id],
                ['data-pjax'=> '#formsection']) ?>
    <?php endforeach ?>
</div>
<?php Pjax::begin(['id'=>'formsection', 'linkSelector'=>'#categories a']); ?>
<?php Pjax::end(); ?>

Isom

Answer 1

Proper Solution for Pjax

If you don't want to place tags data between Pjax::begin() and Pjax::end() use Pjax::widget() and include the linkSelector option:

Pjax::widget(['id' => 'formsection', 'linkSelector' => '#categories a']);

where formsection is the id of the element to receive data returned by Pjax when #categories a link is clicked. #categories a being a JQuery Selector

Otterburn

Answer 2

A bit late, but I wanted to add something- Whatever you set the pjax id attribute to will be filled with the ajax response. In my case I just wanted to respond with a "saved" message and not replace the entire form so I used this:

<span id="modal-response"></span>'

<?php
Pjax::widget([
    'id' => 'modal-response',  // response goes in this element
    'enablePushState' => false, 
    'enableReplaceState' => false, 
    'formSelector' => '#options-form',// this form is submitted on change
    'submitEvent' => 'change',
    ]);
?>

Tinney

Answer 3

you cant reload different block via Pjax, just what you used into Pjax. Pjax reload only block which inside it. For example:

Pjax::begin(['id' => 'boxPajax']);
    <a>some html<a>
Pjax::end();

so in html you will take

<div id="boxPajax">
    <a>some html<a>
</div>

When you clicked link, Pjax send request to url in this link, and he will reload id="boxPajax" with successfully response.

Ascender

Answer 4

I think,just writing that div out of the pjax will solve the problem. Just a guess!

Like this,

 <div id="formsection"></div>

 <?php Pjax::begin(); ?>
 <?php foreach ($tree as $id => $name): ?>
    <?php echo Html::a(
        $name, 
        ['update', 'id'=>$id],
        ['data-pjax'=> '#formsection']) ?>
 <?php endforeach ?>
 <?php Pjax::end(); ?>

Also, in controller,render the view partially.

 return $this->renderPartial('update');

Genetics

I tried what you said, and it didn't solve the problem. After clicking the links the #formsection div is empty but my links are replaced by the results of the ajax call. – Isom

I changed renderAjax to renderPartial. Still no changes in the results. :( – Isom

Also try with the help of firebug so that u can see whats happening in the background! I think it's somthing with ur forloop – Genetics

I'va updated the question. I think the problem is with the js code that Pjax widget generates. But I can't change it. – Isom

Have you solved the problem? Please post working solution if you have! – Scientific