Автоматическое обновление нескольких div с Jquery

Question

Я создаю панель управления для большого дисплея на работе, мне удалось получить один div, автоматически обновляющий страницу запроса php, но я не могу придумать, как использовать эту функцию на другом div для другого скрипта, не копируявсю функцию и переименование ее, которая просто кажется глупой.

Это то, что я до сих пор:

<script type="text/JavaScript"> 
$(document).ready(
function update() 
{
    $.get("response.php", function(data){
            $("#ajaxtest").html(data);
            window.setTimeout(update, 10000);
        });
});
</script>

Я сделал некоторые поиски в stackoverflow и нашел этот изящный небольшой фрагмент, хотя еготолько для одного div ... ( второй пример: автоматическое обновление div с помощью jquery )

Answer 1

$(document).ready(

function update(el) 
{
    $.get("response.php", function(data){
    el.html(data);
    window.setTimeout(el, 10000);
});

update($("#ajaxtest"));

});

Answer 2

Вы отключили функцию обновления, которая будет вызвана непосредственно, когда документ будет готов.Это не обязательно хорошая идея, вы хотите, чтобы эта функция вызывалась несколько раз.Например, рассмотрим следующее (непроверенный код!):

function update(divId) 
{
   $.get("response.php", function(data){
   $(divId).html(data);
   window.setTimeout(update, 10000);
}

, а затем

$(document).ready(function(){
   update("#ajaxtest");
   update("#otherdiv");
   update(".divsbycssclass");
});

Если вам нужен другой URL, передайте его тоже.Вы можете вызвать этот метод обновления по таймеру или событию:

$("a").click(function(){
   update("#ajaxtest");
});

Это то, что вы имели в виду?Если нет, не стесняйтесь комментировать, и я буду редактировать.

Answer 3

Это просто непроверенная идея, но попробуйте ...

function update(){
    // all your defined classes which are .refreshingDivs will do the following
    $('.refreshingDivs').each(function(){
        // foreach refreshingDiv, get their id attribute and send with request
        // so that response.php knows what to do for each specific div
        $.get('response.php?id=' + $(this).attr('id'), function(data){ 
            // place the returned data inside refreshingDiv children 
            // which has the .placeholder class
            $(this).children('.placeholder').html(data);
            window.setTimeout(update, 10000);
        });
    });
}
$(document).ready(function(){
    update();
});

Если у вас есть контроллеры для обновления определенных дивов, подход Саймона вам подходит лучше всего.

Answer 4

То, что вам нужно сделать по сути, это вернуть более одного набора содержимого одновременно.Это означает отправку данных в какой-то структуре, чтобы ваш JS мог быстро их проанализировать и применить содержимое соответствующим образом.Самый лучший способ сделать это - использовать JSON - формат обмена данными, который легко читается и является подмножеством Javascript.

Сначала измените ваш PHP, чтобы создать массив содержимого для отправки:

$divs = array (
    'firstDiv'  => $firstDivContent,
    'secondDiv' => $secondDivContent
);

Затем вам нужно будет кодировать их как JSON, используя json_encode:

$divs_json = $divs;

Затем верните это в браузер с соответствующими заголовками:

header('Content-type: application/json');
echo $divs_json;
die();

В вашем Javascript вам потребуется сделать только один запрос, чтобы получить обе части.Вы можете использовать setInterval и анонимную функцию, чтобы код повторялся каждые 10 секунд:

setInterval(function(){
    $.get('response.php', function(data) { //data is a JS object with two properties, firstDiv and secondDiv
        $('#firstDiv').html(data.firstDiv);
        $('#secondDiv').html(data.secondDiv);
    });
}, 10000);

Answer 5

Я добавляю некоторые проблемы, чтобы заставить это работать, поэтому, основываясь на ответе Ран Бар-Зика, я пришел к следующему, которое, кажется, работает для меня.

$(document).ready(function(){
    var refreshId = setInterval(function(){
        update("#test", "/test.php");
    }, 30000);
    $.ajaxSetup({ cache: false });

    update("#test", "/test.php");
});

function update(divId, fileId)
{
    $.get(fileId, function(data){
    $(divId).html(data);
    });
}

Теперь у меня есть идея, если этоправильно или неправильно, но это работает для меня.

Строка

window.setTimeout(update, 10000);

в ответе Ран Бар-Зика просто не хотела работать на меня, не знаю почему.Начальная загрузка сработала, но обновление не сработало, поэтому я изменил код, приведенный выше, чтобы он заработал.