Обновление данных view без перезагрузки страницы после ajax post'a

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
Аватара пользователя
artem0711
Сообщения: 1
Зарегистрирован: 2018.07.13, 09:43
Откуда: Orenburg

Обновление данных view без перезагрузки страницы после ajax post'a

Сообщение artem0711 » 2018.07.13, 10:01

Добрый день всем yii программистам!
Являюсь начинающим разработчиком в yii2, столкнулся с проблемой: нужно обновить страницу после добавления данных в БД ajax'ом без полной перезагрузки страницы. Читал про Pjax, но не помогает он. Вот мой код:

Action:

Код: Выделить всё

public function actionIndex()
    {
        $model = new Realcomment();

        if (\YIi::$app->request->isAjax)
        {
            $model->date_time = new Expression('NOW()');

            if ($model->load(Yii::$app->request->post()) && $model->save())
            {
                $comments = Realcomment::getComments();
                return $this->render('index', [
                    'model' => $model,
                    'comments' => $comments,
                ]);
            }
        }
        $comments = Realcomment::getComments();
        return $this->render('index', [
            'model' => $model,
            'comments' => $comments,
        ]);
    }
View:

Код: Выделить всё

<div class="realcomment-index">
<h1><?= Html::encode($this->title) ?></h1>
<div class="col-md-8 col-md-offset-2">
    <div class="row">
        <div class="col-lg-4">
            <div class="panel panel-info">
                <div class="panel-heading">Enter comment</div>
                <div class="panel-body">
                    <div class="realcomment-form">
                        <?php $form = ActiveForm::begin(); ?>
                        <?= $form->field($model, 'nick')->textInput(['maxlength' => true]) ?>
                        <?= $form->field($model, 'message')->textInput(['maxlength' => true]) ?>
                        <?= Html::submitButton('Send', ['class' => 'btn btn-success']) ?>
                        <?php ActiveForm::end(); ?>
                    </div>
                </div>
            </div>
                     
        </div>
        
        <div class="col-lg-8">
            <div class="panel panel-primary">
                <div class="panel-heading">Comments (<?= count($comments) ?> comments)</div>
                <div class="panel-body" style="max-height: 350px; overflow: auto;">
                    <?php foreach ($comments as $comment): ?>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <strong align="center"><?= $comment->nick ?></strong>
                                <span class="text-muted">
                                    at
                                    <?php
                                        $date = new DateTime($comment->date_time);
                                        echo $date->format('d M Y H:i');
                                    ?>
                                </span>
                            </div>
                            <div class="panel-body">
                                <?= $comment->message ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<?php 
$js = <<<JS
    $('form').on('beforeSubmit', function(){
        var data = $(this).serialize();
        $.ajax({
            url: '/realcomment/index',
            type: 'POST',
            data: data,
            success: function(){
                
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });
JS;
$this->registerJs($js);
?>
В данный момент прекрасно добавляются данные, но нужно отобразить комментарии в упрощенном выводе комментариев, после успешной отправки сообщения. Заранее благодарю за подсказки!

Аватара пользователя
Dominus
Сообщения: 717
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Обновление данных view без перезагрузки страницы после ajax post'a

Сообщение Dominus » 2018.07.13, 20:03

Ну вам нужно добавить контейнер, который следует обновлять

Код: Выделить всё

<div class="realcomment-index">
    <h1><?= Html::encode($this->title) ?></h1>
    <div id="realcomment-container" class="col-md-8 col-md-offset-2">
        <?= $this->render('_index', [
            'model' => $model,
            'comments' => $comments,
        ]) ?>
    </div>
</div>

<?php
$js = <<<JS
    $('form').on('beforeSubmit', function(){
        var data = $(this).serialize();
        $.ajax({
            url: '/realcomment/index',
            type: 'POST',
            data: data,
            success: function(response){
                $('#realcomment-container').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });
JS;
$this->registerJs($js);
_index.php

Код: Выделить всё

<div class="row">
    <div class="col-lg-4">
        <div class="panel panel-info">
            <div class="panel-heading">Enter comment</div>
            <div class="panel-body">
                <div class="realcomment-form">
                    <?php $form = ActiveForm::begin(); ?>
                    <?= $form->field($model, 'nick')->textInput(['maxlength' => true]) ?>
                    <?= $form->field($model, 'message')->textInput(['maxlength' => true]) ?>
                    <?= Html::submitButton('Send', ['class' => 'btn btn-success']) ?>
                    <?php ActiveForm::end(); ?>
                </div>
            </div>
        </div>

    </div>

    <div class="col-lg-8">
        <div class="panel panel-primary">
            <div class="panel-heading">Comments (<?= count($comments) ?> comments)</div>
            <div class="panel-body" style="max-height: 350px; overflow: auto;">
                <?php foreach ($comments as $comment): ?>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <strong align="center"><?= $comment->nick ?></strong>
                            <span class="text-muted">
                            at
                                <?php
                                $date = new DateTime($comment->date_time);
                                echo $date->format('d M Y H:i');
                                ?>
                        </span>
                        </div>
                        <div class="panel-body">
                            <?= $comment->message ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
Контроллер

Код: Выделить всё

public function actionIndex()
    {
        $model = new Realcomment();

        if (\YIi::$app->request->isAjax)
        {
            $model->date_time = new Expression('NOW()');

            if ($model->load(Yii::$app->request->post()) && $model->save())
            {
                \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
                $comments = Realcomment::getComments();                
                return $this->renderAjax('_index', [
                    'model' => $model,
                    'comments' => $comments,
                ]);
            }
        }
        $comments = Realcomment::getComments();
        return $this->render('index', [
            'model' => $model,
            'comments' => $comments,
        ]);
    }
Не проверял, но как то так.
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!

Loveorigami
Сообщения: 820
Зарегистрирован: 2014.08.27, 21:54

Re: Обновление данных view без перезагрузки страницы после ajax post'a

Сообщение Loveorigami » 2018.07.13, 21:06

https://github.com/loveorigami/yii2-modal-ajax
Там есть пример обновления после добавления записи.

Ответить