web-dev-qa-db-fra.com

Utiliser Pjax dans YII2 pour mettre à jour un div

J'essaie d'utiliser le widget Pjax dans un projet yii2.
Mon objectif est de mettre à jour le div #formsection avec du contenu.
Mon code: Voir

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

Mettre à jour l'action

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

Lorsque je clique sur le lien, tout le contenu de pjax div est remplacé par la réponse du serveur. Je veux juste mettre à jour le contenu de #formsection.

J'ai trouvé un post ici mais ça ne marche pas aussi.

Quelques informations supplémentaires: Ceci est le code js que le widget Pjax génère dans la 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});});
});

Quel est le problème avec mon code?

J'ai résolu le problème. Je devais changer la vue à ceci.

<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
12
ahb360

Solution appropriée pour Pjax

Si vous ne souhaitez pas placer de données de balises entre Pjax::begin() et Pjax::end() , Utilisez Pjax::widget() et incluez l'option linkSelector:

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

où formsection est l'id de l'élément à recevoir les données renvoyées par Pjax lorsque le lien #categories a est cliqué. #categories a étant un JQuery Selector

5
shivani parmar

Un peu tard, mais je voulais ajouter quelque chose - Quel que soit le paramètre que vous définissez pour l'attribut pjax id, la réponse ajax sera remplie. Dans mon cas, je voulais juste répondre avec un message "enregistré" et ne pas remplacer le formulaire en entier, alors j'ai utilisé ceci: 

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

Je pense que le seul fait d'écrire cette division à partir de la variable pjax résoudra le problème. Juste une supposition!

Comme ça,

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

De plus, dans le contrôleur, restituer partiellement la vue.

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

vous ne pouvez pas recharger différents blocs via Pjax, exactement ce que vous avez utilisé dans Pjax . Pjax ne recharge que le bloc qui se trouve à l'intérieur . Par exemple:

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

donc en html vous allez prendre 

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

Lorsque vous avez cliqué sur le lien, Pjax envoie la demande à l’URL de ce lien et il rechargera id = "boxPajax" avec une réponse satisfaisante.

1
Aleksey Stetsenko