Как ограничить pjar на обновление иконки?

Question

[Silverviql]

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

Во вьюшке прописал pjax.

<?php Pjax::begin(['id' => 'pjax-container']); ?> 
echo $notifications == null ? '<div class="notification-icon">' : '<div class="notification-icon newNotification">'; 
<?php Pjax::end(); ?>

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

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

Вот это я получаю на выходе.

Answer 1

[Максим Федоров]

Так же он обновляет иконку , но нажать на нее можно только в то время пока скрипт ее не обновит

Нажать на нее нельзя потому что Pjax при обновлении заменяет html находящийся на странице тем что возвращает сервер. Соответственно скрипты привязанные на Ваш html-элемент слетают, и после каждого обновления Pjax их стоит перевешивать

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

Довольно кривое решение только создающее ненужные на грузки на сервер и на клиент. Для подобных задач лучше использовать сокеты

Comments

[Silverviql]

А откуда он берет данные если я его прописал только для echo $notifications == null ? '' : '';. Он обращается к серверу и получает все что рендерится?

[Максим Федоров]

Silverviql, если не изменяет память:
1. Запрос с клиента (браузера) отправляется на сервер
2. Сервер рендерит страницу
3. Сервер вырезает из отрендеренной страницы кусок HTML относящийся к конкретному Pjax-блоку и возвращает его на клиент
4. Клиент удаляет содержимое Pjax-блока и вставляет в него новое содержание, которое было возвращено с сервера

[Silverviql]

Максим Федоров, Можете подсказать как это примерно реализовывать через веб сокет ?. Я поднял сервер, сделал клиент, сообщениями могу обмениваться. Если есть какой то пример буду благодарен.

Answer 2

[Максим Тимофеев]

Как Вы ловите клик по иконке?
По идее вот так должен ловить:

$('body').on('click', '.someIconClass', function(){
concole.log('уряяя!!!');
});

Comments

[Silverviql]

Так мне надо ловить клик ,мне надо чтобы пользователю отобразилось что иконка стала зеленой т.к там появилось уведомление.
Сейчас надо каждый раз страницу полностью обновлять чтобы условие echo $notifications == null ? '' : ''; выполнилось, а хочу чтобы пользователь не обновлял страницу полностью , а только эта икона обновлялась.

[Максим Тимофеев]

Silverviql, Так реализуйте на js, а не на php. Тут вообще много кастомного, проще реализовать без pjax вообще. Зачем Вы его тут используете?

[Silverviql]

Максим Тимофеев, Потому что не знаю как ..

[Максим Тимофеев]

Silverviql, Ну так надо разобраться. Почитать про ajax про js. Без них сегодня разработка не возможна.

[Silverviql]

Максим Тимофеев,

<blockquote><?php echo date("H:i:s");;
    $script = <<<JS
    function show()  
        {  
            $.ajax({  
                type: "POST",  
                    url: "admin",   
                cache: false,  
                success: function(html){  
                    $("#content").html(html);  
                }  
            });  
        }  
      
       
            show();  
            setInterval('show()',10000);  
    
JS;
    $this->registerJs($script);
    echo '<div id="content"></div>';
    ?></blockquote>

Он так же как и pjax отрабатывает, просто тянет всю страницу..
Как ограничить на получение только echo date("H:i:s"); ?

[Максим Тимофеев]

Silverviql, Вам надо текущее время? А почему его в js не получить?

[Silverviql]

Максим Тимофеев, нее эт пример ) я хочу его переделать для получение данных о новых уведомлениях .
У меня уже есть модуль уведомлений, но отображается он когда страницу обновляешь. То есть например у меня задача на двух пользователей, один написал другому пришло уведомление что в этой задаче уведомление и иконка становится зеленой и при клике на нее показан текст типо к такой задаче комментарий при нажатие он переходит на эту задачу.
Вот изменение иконки на зеленый, клин на иконку выпадающее окошко с отображение уведомления и возможность перехода на это уведомление при нажатие на сообщение есть, но чтобы все это появилось надо обновить страницу... А мне надо чтобы обновилась часть только вот именно иконка стала зеленой ) В дальнейшем если я это сделаю я хочу добавить чтобы еще вспылающее окно было, похожее на встроенного уведомления yii2.
Но все упирается в мои знания ajax. Так как на данный момент я знаю что он отправляет запрос на сервер по url получает всю страницу которая рендерится и передает ее обратно. А вот как сделать чтобы он не получал всю страницу а только эту гребанную иконку и делал ее зеленой при появление сообщения от другого пользователя я не могу сделать. Поэтому я и прошу помощи.

[Максим Тимофеев]

по url получает всю страницу

он получает то, что ему отдает сервер. Это может json с данными или просто кусок html. Сделайте отдельный экшен, как вариант:

public function actionGetNotyfyCount(){
   Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
   return [
                'count' => SomeModel::find()->andWhere(['user_id'=>Yii::$app->user->id])->count(),
                'user_id' => Yii::$app->user->id,
               ];
}

посылаете ajax, получаете ответ, и в зависимости от count меняете цвет и т.д.

Более правильно сделать это с помощью worker-ов и сокетов. Но Вы там заблудитесь. Разберитесь с ajax и js для начала.