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

У меня есть страница html

<div id="mainframe">

            <div id="div2"></div>


        <div id="div3"></div>

        <div id="div4">

            <table class="table3">
                <tbody>
                    <tr>
                    <td width=3%></td>
                        <td class="listtitle">1</td>
                        <td width=5%></td>
                        <td class="listtitle">2</td>
                    </tr>
                    <tr>
                    <td width=3%></td>
                        <td class="dashboardchart" ><div  style="width:550px ; height:400px"><canvas id="chart_scanner" width="500" height="400">
                        </canvas></div></td>

                        <td class="dashboardchart"><div id="div_chartActivity" style="width:550px ; height:400px"><canvas id="chart_activity" width="500" height="400">
                        </canvas></div></td>
                        <td width=3%></td>
                    </tr>
                </tbody>
            </table>

        </div>  
    </div>

Я хочу реализовать автоматическое обновление через 15 секунд, но только #div3 и #div4 должны быть перезагружены не всю страницу.

Может ли кто-нибудь подсказать, какой скрипт я должен добавить на свою страницу

3 ответа

  1. Можно использовать setInterval или setTimeout для вызова функции каждые X секунд

    var count = 0;
    
    function refresh() {
    
    //your stuff to refresh your divs here (ajax requests...)
    
      $("#div3").html(count);
      $("#div4").html(count);
      count++;
      setTimeout(refresh, 1000);
    }
    
    refresh();
    

    https://jsfiddle.net/qbknsu0m/

  2. Вы можете использовать этот код:

    var myVar = setInterval(myTimer, 15000);
    
    function myTimer() {
        //Here you can update specific part of your page
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
    

    Мы запускаем таймер JavaScript на 15 секунд. Затем, когда проходит 15 секунд, выполняется функция myTimer. Внутри этой функции вы можете выбрать элемент dom, который вы хотите обновить, и установить его свойство innerHTML на содержимое, которое вы хотите показать.

  3. Что-то вроде этого:

     $(document).ready(
                function() {
                    setInterval(function() {
                        var randomnumber = Math.floor(Math.random() * 100);
                        $('#div3').text(
                                'I am getting refreshed every 3 seconds..! Random Number ==> '
                                        + randomnumber);
                        $('#div4').text(
                                'I am getting refreshed every 3 seconds..! Random Number ==> '
                                        + randomnumber);
                    }, 3000);
                });