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

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

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

Сообщение artem0711 »

Добрый день всем 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
Сообщения: 874
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

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

Сообщение Dominus »

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

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

<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
Сообщения: 977
Зарегистрирован: 2014.08.27, 21:54

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

Сообщение Loveorigami »

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

Аватара пользователя
Akulenok
Сообщения: 434
Зарегистрирован: 2014.05.05, 18:32
Откуда: localhost

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

Сообщение Akulenok »

Подскажите как изменить URL в JS

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

$js = <<<JS
    $('form').on('beforeSubmit', function(){
        var data = $(this).serialize();
        $.ajax({
            url: '/order/default/add-order',
            type: 'POST',
            data: data,
            success: function(response){
                $('#basket').html(response);
            },
            error: function(){
                alert('Error!');
            }
        });
        return false;
    });
JS;
$this->registerJs($js);
Этот код добавляет запись, но еще мне надо удалять записи

есть кнопка удаления

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

 <?= Html::a('<i class="glyphicon glyphicon-trash text-danger"></i>', ['/order/default/delete-order', 'id' => $order->id], [
                    'data-toggle' => 'tooltip',
                    'data-placement' => 'bottom',
                    'title' => 'Удалить заказ из корзины',
                    'data' => [
                        'confirm' => 'Вы уверены?',
                        'data-method' => 'get',
                    ],
                ]) ?>
надо чтобы запрос пошел по этому урл /order/default/delete-order
ភាសាខ្មែរ Yii2 - это кайф!

german.igortcev
Сообщения: 226
Зарегистрирован: 2014.08.18, 14:01

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

Сообщение german.igortcev »

pjax все решит. Смотри пример по pjax на сайте nix tips

Prooksius
Сообщения: 92
Зарегистрирован: 2019.01.17, 23:24

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

Сообщение Prooksius »

Как вариант, прописывать некие "data-" атрибуты для формы, в которых хранить ссылки на добавление, изменение, удаление, сформированное в php через Url::to(). А в JS читать эти data-атрибуты и проставлять в ajax-вызов вместо жестко прописанной константы "'/order/default/add-order'". Но лучше, конечно в пиджак (pjax) обернуть, как тут однажды кто-то сказал))

Ответить