GAMITG
GAMITG

Reputation: 3818

How to reload pjax div in modal window in yii2

I have used modal for viewing comments list, with modal having an update button and a textbox.

When a user enters some text in the text box and click update button i want the comments list div to be reloaded without the whole page being reloaded or the modal being closed or hided.

I have already read How to update widget with pjax in modal window in yii2 que. but still not getting solution.

My code is

Registered Js and view file

$this->registerJs("
$(function() {
    $('#replayMeg').on('beforeSubmit', function(event, jqXHR, settings) {
        var comment = $('#".Html::getInputId($modelReply, 'hdr_comments')."').val();
        var ticketId = $model->hdt_id;

        $.ajax({
            url: '".Url::to(['helpdesk-replies/create'])."',
            type: 'post',
            data: { replyMsg : comment, ticketId : ticketId},
            beforeSend: function() {
                if($('#".Html::getInputId($modelReply, 'hdr_comments')."').val() == '')
                {
                    $('.field-helpdeskreplies-hdr_comments').addClass('form-group field-helpdeskreplies-hdr_comments required has-error');
                    $('.help-block').html('Reply cannot be blank.');
                    return false;
                }
            },
            success: function(data) {
                //$.pjax.reload({container:'#update_replyBox'});
            }
        });

        return false;
    })
});
");

<?php yii\widgets\Pjax::begin(['id' => 'update_replyBox']); ?>
<div class="modal-body">
<div class="box-tools pull-right">
               <?= $actionBtn; ?>
            </div>
</div>
<div class="panel panel-info">
          <div class="panel-heading colorchangeheader left-align">
            <i class="fa fa-users fa-fw"></i> <?= $model->getUserName($cData['hdr_replay_user_id']); ?> <span class="mobilebreakpoint"><i class="fa fa-clock-o fa-fw"></i><?= Yii::$app->formatter->asDate($cData['created_at']); ?> @ <?= Yii::$app->formatter->asTime($cData['created_at']); ?></span>
          </div>
          <div id="rp8" class="panel-body">
           <?= $cData['hdr_comments'] ?>
          </div>
    </div>

<?php $form = ActiveForm::begin(['id' => 'replayMeg']); ?>
        <div class="box-body">
            <div class='row'>
                <div class='col-sm-12'>
                    <?= 
                        $form->field($modelReply, 'hdr_comments')->widget(RemainingCharacters::className(), [
                            'type' => RemainingCharacters::INPUT_TEXTAREA,
                            'name' => 'message_body',
                            'id' => 'message_body-textarea',
                            'text' => Yii::t('app', '{n} Characters Remaining'),
                            'label' => [
                                'tag' => 'p',
                                'id' => 'my-counter',
                                'class' => 'counter text-aqua',
                                'invalidClass' => 'error'
                            ],
                            'options' => [
                                'rows' => '3',
                                'class' => 'form-control replyTextArea',
                                'maxlength' => 200,
                                'placeholder' => Yii::t('app', 'Write something'),
                            ]
                        ]);
                    ?>
                </div>
            </div>
        <!--/div>
        <div class="box-footer"-->
            <?= Html::button('<i class="fa fa-reply"></i> '.Yii::t('comm', 'Reply'), ['class' => 'btn btn-info btn-create submit', 'type' => 'submit']) ?>
        </div>
        <?php ActiveForm::end(); ?>

    <?php yii\widgets\Pjax::end() ?>

enter image description here

Upvotes: 2

Views: 9323

Answers (1)

Hiren Bhut
Hiren Bhut

Reputation: 1226

Please try to set backdrop false in the modal

'clientOptions' => ['backdrop' => false]

or

Set data-pjax true in your active form

<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>

For more details http://www.yiiframework.com/wiki/772/pjax-on-activeform-and-gridview-yii2/

For more options on Modal Refer

Upvotes: 3

Related Questions