Reputation: 3818
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() ?>
Upvotes: 2
Views: 9323
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