0

Я хочу сделать динамическое обновление иконки уведомление на yii2. Но проблема в том что он начинает создавать div и в него закидывать данные из бд.Так же он обновляет иконку , но нажать на нее можно только в то время пока скрипт ее не обновит, после иконка становится некликабельной, чтобы можно было на нее нажать надо обновлять страницу и открыть до того как скрипт не отработает.

Подключил в layout виджет use yii\widgets\Pjax; и иконку обернул в

   <?php Pjax::begin(['id' => 'pjax-container']); ?>
    <?= Notifications::widget() ?>
    <?php Pjax::end(); ?>

В script.js прописал вызов каждые 3 секунды.

$(document).ready(function(){
    setInterval(function(){
        $.pjax.reload('#pjax-container')
    }, 3000);

Файл компонента Notifications.php

<?php
namespace frontend\components;
use yii\base\Widget;
use app\models\Notification;
use Yii;
use yii\helpers\Html;
class Notifications extends Widget
{
    public function run()
    {
        if (!Yii::$app->user->isGuest){
            $notifications = Notification::find()->where(['id_user' => Yii::$app->user->id, 'active' => 1])->all();
            echo '<div class="notification">';
            echo $notifications == null ? '<div class="notification-icon">' : '<div class="notification-icon newNotification">';
            echo '<span class="glyphicon glyphicon-bell"></span>
                </div>
                <div class="notification-container hidden">
                <div class="notification-container_message">';
            foreach ($notifications as $notification){
                echo '<div>'.Html::a($notification->name, ['notification/read-notice', 'id' => $notification->id], ['class' => 'notification-content']).'</div>';
            }
            echo '</div><div class="notification-all"><span>'.Html::a('Показать все', ['notification/index']).'</span></div>';
            echo '</div>
            </div>';
        }
    }
}

Как это выглядит

4
  • Перечитайте документацию pjax
    – Peresada
    Commented 22 апр. 2018 в 18:14
  • @Peresada Когда Pjax отправляет запрос, он совершает вызов действия (action), и получает в ответ данные. Далее виджет обновит лишь часть страницы, которая находится между блоками Pjax::begin() и Pjax::end() без перезагрузки ее целиком <?php Pjax::begin(['id' => 'pjax-container']); ?> echo $notifications == null ? '<div class="notification-icon">' : '<div class="notification-icon newNotification">'; <?php Pjax::end(); ?> Я сделал так во вьюшке и толку он все равно получает данные из таблицы Notification
    – Silverfire
    Commented 22 апр. 2018 в 19:31
  • @Silverfire то что Pjax обновляет лишь часть контента внутри своего тела, никак не означает что код выше/ниже этого тела не будет отрабатывать, откуда ему брать данные как не из БД если вы это чётко там указали? вопрос запутан
    – Blacknife
    Commented 22 апр. 2018 в 21:04
  • @Blacknife в примерах на русском указано лишь что можно обернуть pjax div и но его будет обновлять ,а не тырить все данные со всей страницы и пихать их в один контейнер.
    – Silverfire
    Commented 23 апр. 2018 в 5:30

1 ответ 1

1

Pjax работает немного иначе: при клике на ссылку или отправке формы - pjax берет ту инфу, которая выдается по тому адресу, куда ведет ссылка или куда отправляют данные формы, заменяя те данные, которые находятся внутри контейнера. То есть Ваш <?= Notifications::widget() ?> будет просто перезаписан после следующего обновления pjax'а

Вы не указали явно, куда будет обращаться pjax для получения выводимой информации. Так как это не указано явно - он обращается к тому адресу, где в данный момент отображается. Чтобы указать точный адрес, откуда pjax будет брать информацию, в конфиге pjax предусмотрены опции target и url (я не помню точно, какой из этих параметров отвечает за адрес получения информации, подробней можно узнать в документации). Либо если не разберетесь с параметрами выше, можно покостылить - добавив невидимый тег <a id="reload_pjax" href="/controller/metod-to-get-pjax-info"> и вместо

$(document).ready(function(){
    setInterval(function(){
        $.pjax.reload('#pjax-container')
    }, 3000);

Использовать

$(document).ready(function(){
        setInterval(function(){
            $("#reload_pjax").trigger("click");
        }, 3000);

Тогда каждые 3 секунды будет имитироваться клик по ссылке, которая обращается к методу metod-to-get-pjax-info для получения информации, которая отобразится pjax'ом.

1
  • @спасибо я не знал о том как его ограничить на то, чтобы он не получал лишние данные.
    – Silverfire
    Commented 23 апр. 2018 в 5:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.