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(); ?>
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
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',
]);
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With