如何在 yii2 的模态窗口中使用 pjax 更新小部件

我在一个模态窗口中有两个 ActiveForm，在提交第一个表单后，我需要更新第二个并保持模态.

据我所知，pjax 可以处理这个问题，但不能让它正常工作.

在 _form.php 中，我有 ActiveForm 和应该更新的小部件:

<?php $form = ActiveForm::begin(['id'='表单','enableAjaxValidation'=>true,]);?><?= Html::activeHiddenInput($riskModel, 'id', ['value' => $riskModel->id]) ?><?php Pjax::begin(['id' =>'解决方案'，]) ?>//需要更新这个小部件<?= $form->field($riskModel, 'solutions_order')->widget(SortableInput::classname(), ['物品' =>$riskModel->getSolutionList(),'隐藏输入' =>错误的，'选项' =>['class'=>'form-control', 'readonly'=>false]]);?><?php Pjax::end() ?><div class="form-group"><?= Html::submitButton($riskModel->isNewRecord ? 'Create' : 'Update', ['class' => $riskModel->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'onclick' => 'return isConnected()']) ?>
<?php ActiveForm::end();?>

然后我有 Ajax 请求，如果创建新解决方案，该请求将返回成功:

$.ajax({网址:form.attr('action'),类型:'帖子'，数据:form.serialize(),成功:功能(数据){如果(数据&& data.result == 1){$.pjax.reload({container:'#solutionItems'});}},错误:函数(XMLHttpRequest，textStatus，errorThrown){$("#error").html("Kļūda!Neizdevās pievienot ierakstu.").fadeIn('highlight','', 2000, callbackError());$("#solutions-solution").val("");}});

但是

$.pjax.reload({container:'#solutionItems'});

关闭模态.如果我将返回值放在一个 div 中，则 ajax 可以正常工作并且模态不会关闭.

解决方案

没有 $.pjax 管理，只加了这个

 $("#risks-solutions_order-sortable").append('<li data-id="'+data.id+'" data-key="'+data.id+'" draggable="true">'+data.solution+'');$("ul[id$='sortable'").trigger('sortupdate');$('#risks-solutions_order-sortable').sortable("refreshPositions");

在 ajax 中成功，一切正常！:)

I have two ActiveForms in a modal window and after submitting first form, I need to update second one and stay in modal.

As I understand pjax can handle that, but can't get it to work properly.

In _form.php I have ActiveForm with widget which should be updated:

<?php $form = ActiveForm::begin([
    'id'=>'form',
    'enableAjaxValidation'=>true,
]); ?>
<?= Html::activeHiddenInput($riskModel, 'id', ['value' => $riskModel->id]) ?>

<?php Pjax::begin([
    'id' => 'solutionItems',
]) ?>
//need to update this widget
    <?= $form->field($riskModel, 'solutions_order')->widget(SortableInput::classname(), [
        'items' => $riskModel->getSolutionList(),
        'hideInput' => false,
        'options' => ['class'=>'form-control', 'readonly'=>false]
    ]); ?>
<?php Pjax::end() ?>

<div class="form-group">
    <?= Html::submitButton($riskModel->isNewRecord ? 'Create' : 'Update', ['class' => $riskModel->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'onclick' => 'return isConnected()']) ?>
</div>

<?php ActiveForm::end(); ?>

And then I have Ajax request which returns success if new solution is created:

$.ajax({
    url: form.attr('action'),
    type: 'post',
    data: form.serialize(),
    success: function (data) {
        if (data && data.result == 1) {
            $.pjax.reload({container:'#solutionItems'});
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#error").html("Kļūda! Neizdevās pievienot ierakstu.").fadeIn('highlight','', 2000, callbackError());
        $("#solutions-solution").val("");
    }
});

But

$.pjax.reload({container:'#solutionItems'});

closes the modal. If I put the returned value in a div, then ajax works properly and the modal is not closing.

解决方案

Managed without $.pjax, just added this

 $("#risks-solutions_order-sortable").append('<li data-id="'+data.id+'" data-key="'+data.id+'" draggable="true">'+data.solution+'</li>');
 $("ul[id$='sortable'").trigger('sortupdate');
 $('#risks-solutions_order-sortable').sortable( "refreshPositions" );

in ajax success and everything is ok! :)