web-dev-qa-db-ja.com

YII2でPjaxを使用してdivを更新する

yii2プロジェクトでPjaxウィジェットを使用しようとしています。
私の目標は、div #formsection一部のコンテンツ。
私のコード：表示

<?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(); ?>

更新アクション

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

リンクをクリックすると、すべてのpjax divの内容は、サーバーからの応答に置き換えられます。 #formsection更新するコンテンツ。

私は投稿を見つけました here が、それでもうまくいきません。

もう少し情報：これは、Pjaxウィジェットがページに生成するjsコードです。

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});});
});

私のコードの何が問題なのですか？

私は問題を解決しました。私はこの見方を変えなければなりませんでした。

<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(); ?>
pjaxyii2
14
ahb360

Pjaxの適切なソリューション

Pjax::begin()とPjax::end()の間にタグデータを配置したくない場合は、Pjax::widget()を使用し、linkSelectorオプションを含めます。

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

ここで、formsectionは、#categories aリンクをクリックしました。 #categories aはJQueryセレクター

7
shivani parmar

少し遅れましたが、何かを追加したいと思いました。pjaxid属性に設定したものはすべてajax応答で埋められます。私の場合、「保存された」メッセージで応答し、フォーム全体を置き換えたくなかったので、これを使用しました：

<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',
    ]);
?>
4
glyph

pjaxを使用して別のブロックをリロードすることはできません。 Pjaxは、その中のブロックのみをリロードします。例えば：

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

だからhtmlではあなたが取るでしょう

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

リンクをクリックすると、PjaxはこのリンクのURLにリクエストを送信し、id = "boxPajax"を正常にリロードして応答します。

2
Aleksey Stetsenko

pjaxからdivを記述するだけで問題が解決すると思います。推測です！

このような、

 <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(); ?>

また、コントローラーで、ビューを部分的にレンダリングします。

 return $this->renderPartial('update');
1
Dency G B