Асинхронное обновление...?

Question

[Александр]

Есть страница, на ней выводится блок с записями.
Записи регулярно пополняются или удаляются.
Соответственно чтобы у других это отображалось использую этот код:

function refreshNum(){
                   $.ajax({  
                        url: "script.php",  
                        cache: false,  
                        success: function(html){  
                            $("#content").html(html);  
                            setInterval(function(){refreshNum()},2000);
                        }  
                    });  
}
$(function(){
refreshNum();
})

Всё работает в принципе. Но проблема в том, что при клике на любую запись открывается модальное окно, с подробностями записи и возможностью редактирования, и разумеется это окно исчезает из-за обновления этого блока с записями, и получается что его в принципе и открыть-то невозможно из-за постоянного обновления. Почитал про вебсокеты - кажется не дорос ещё. Есть какие-либо варианты реализации подобной конструкции?

Comments

[ой всё]

а что вы имеете ввиду под "Всё работает в принципе." ?

[Александр]

ой всё, я имею ввиду что данный код работает, но не позволяет мне открывать окна, из-за того что постоянно обновляет этот блок, даже если успеть открыть окно в промежутке, оно сразу закроется

Answer 1

[Danil Sapegin]

Открывайте модалку вне того блока, который обновляется и он не будет закрываться
Код лучше вот так переделать:

function refreshNum(){
                   $.ajax({  
                        url: "script.php",  
                        cache: false,  
                        success: function(html){  
                            $("#content").html(html);  

                        }  
                    });  
}
$(function(){
   setInterval(function(){refreshNum()},2000);
});

Comments

[Александр]

"Открывайте модалку вне того блока, который обновляется и он не будет закрываться"
Каким образом?

[Kovalsky]

Александр, вероятно это можно перевести как "не обновляйте всю страницу, а просто добавляйте в список новые элементы"

[Александр]

Никита Полевой, я обновляю и так не всю страницу, один блок только, просто элемент нажав на который открывается окно, находится как раз в этом блоке. Насчёт просто добавляйте в список новые элементы я думал, и думаю до сих пор, но пока не допёр как это нормально сделать

[Kovalsky]

Александр, и правда, извините, даже не посмотрел в код. Просто обычно на тостере задают вопросы типа "почему после document.documentElement.innerHTML = '' не работают кнопки? помогити", по привычке ответил.

А что именно вы не знаете как нормально сделать? С сервера передаёте либо HTML, либо JSON, добавляете новые элементы в список.

[Александр]

Никита Полевой, я попробовал сделать обновление при условии что количество записей (COUNT'ом проверял) не совпадает с количеством из предыдущего запроса, и тогда происходит обновление. Но по сути, окно также сбрасывается, если кто-то что-то изменит, пока ты редактируешь запись. Ваш вариант верен, но у меня затруднения возникли именно с тем как дать понять что именно запись "x" например - новая, и надо её добавить. Может это и выглядит элементарно, но не для меня, к сожалению...
В коде, который я привёл выше в файле script.php лежит собственно копия того же блока что и изначально находится на том месте. Пробовал сверить кол-во записей - до и после запроса (count), но что толку - как взять именно новую запись? Может взять все id записей из предыдущего запроса, и добавить той которой нет? Но это многовато будет если записей например около тысячи...

[Kovalsky]

Александр, первое что пришло в голову - можно банально сохранять timestamp при загрузке документа и отправлять его с запросом. На сервере делать проверку: если пришедший timestamp меньше чем значение в поле last_modification_timestamp конкретной записи, то значит эта запись изменилась с тех пор как пользователь в последний раз получал данные из базы. Т.к. пересылать HTML я считаю в принципе дурацкой идеей, то я по умолчанию подразумеваю, что подобные данные сервер шлёт в JSON. Сервер отсылает только обновленные/добавленные записи, соответственно клиент обновляет/добавляет все записи пришедшие в ответе, после чего timestamp обновляется.

Это стандартный подход.

[Danil Sapegin]

Александр, всмысле? у вас есть вывод HTML списка, верно?
Каким образом модалка открывается?
Наверняка внутри списка какой-нибудь скрытый div, который по клику на заголовок внутри элемента списка открывает этот самый div, верно?
Сделайте 2 списка, один "видимый", второй "невидимый", как раз с содержимым модалок. И дальше по ID или ключу открывайте модалку и спокойно обновляйте основной список, модалка никуда не денется
Или покажите весь кусок HTML кода, который генерируется (можно вместе с PHP или что у вас там)