автоматическое обновление содержимого div с помощью jquery

У меня есть div, который выполняет запрос к базе данных и заполняет div содержимым.

Я хочу иметь возможность обновлять div каждые x секунд, чтобы он отображал любой новый контент.

<div id="chatText" class="chatText">

<cfquery name="GetChatConversation" datasource="#request.FlintHost#" dbtype="ODBC">
    SELECT  *
    FROM        tbl_ChatConversation
    WHERE   int_ChatID = #url.int_ChatID#
</cfquery>

<cfoutput query="GetChatConversation">
    #str_Name# :#str_Content#<br />
</cfoutput>
</div>

У меня есть следующий код, который обновляет div, но вставляет всю страницу в div, а не просто обновляет содержимое.

<script type="text/javascript">
setInterval("my_function();",5000); 
function my_function()
    {
  $('#chatText').load('');
}
</script>

Любые идеи, как заставить это работать?

Спасибо

Павел


json html jquery coldfusion cfquery
person Paul Hopkinson    schedule 10.09.2015    source источник
comment
сокет.ио. Посмотри   -  person Sachin Kanungo    schedule 10.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я бы поместил код, который вы хотите отобразить в div, в отдельный файл (как вы это сделаете, зависит от вас). Я использовал PHP для этого теста, он работает.

Затем для вашей страницы и javascript:

<div id="chatText" class="chatText"></div>

    <script type="text/javascript">
        setInterval("my_function();",5000); 
        function my_function() {
            $('#chatText').load('link to the external file');
        }
    </script>

Я вызвал свой код из отдельного файла .js следующим образом:

$(function(){

    setInterval("LoadDB();",3000); 

});

function LoadDB(){
    $('#chatText').load('db_load.php');
}

Это только что обновило мой DIV. Другой подход заключается в том, что вы можете использовать какой-либо метод ajax, но описанный выше подход должен работать.

person Martin    schedule 10.09.2015
comment
Код, упомянутый в первом предложении, должен включать запрос. - person Dan Bracuk; 10.09.2015

arrow_upward
0
arrow_downward

У вас должно быть 2 отдельных файла. Файл, содержащий чат, и файл, создающий контент для чата. Затем вы можете загрузить содержимое, либо загрузив чат в первый раз, либо перезагрузив данные с помощью функции setTimeout рекурсивным образом, чтобы обновлять файл каждые 5000 мс.

Это быстрый и грязный способ сделать это. Я бы предложил получить ваши данные с помощью JSON и иметь лучший способ отображения ваших данных, например, с помощью таблиц данных.

Файл1.cfm

<div id="chat">
</div>
<script>
    var loadChat = function(){
        $("#chat").load(file2.cfm);
    }
    var refreshChat = function(){
        setTimeout(function(){
            loadChat();
            refreshChat();
        ,5000);
    }
    $(document).on('ready',function(){
        loadChat();
        refreshChat();
    });
</script>

И файл 2 имеет ваш контент

файл2.cfm

<cfquery name="GetChatConversation" datasource="#request.FlintHost#" dbtype="ODBC">
    SELECT  *
    FROM        tbl_ChatConversation
    WHERE   int_ChatID = #url.int_ChatID#
</cfquery>

<cfoutput query="GetChatConversation">
     #str_Name# :#str_Content#<br />
</cfoutput>
person rodmunera    schedule 10.09.2015
comment
setInterval устраняет необходимость в ваших рекурсивных setTimeout вызовах. - person Juffy; 11.09.2015